@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,300italic,400italic,500,500italic,700,700italic);
body{
        font-family: 'Fira Sans', sans-serif;
        font-size: 14px;
        line-height: 1.5em;
        background: url('/static/images/unten-deckend.png') center center fixed no-repeat;
        background-size: cover;
a {
  color: #337ab7;
  text-decoration: none;
}

a.logo{
        height: auto;
        padding-top: 0px;
        padding-bottom: 0px
}
img.logo{
        max-width: 150px;
        max-height: 150px;
}
.menu-text{
        text-transform: capitalize!important;
}
.navbar-default{
        background: #ffffff;
        box-shadow: 0px 10px 15px #888888;
}
.navbar{
        border: none;
}
img.img-responsive{
  box-shadow: 3px 3px 5px 0px #888888;
}
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  min-height: 50px;
  background-color: #231525;
  color: #ffffff;
  padding-top: 10px;
  z-index: 1000;
}
.footer ul li{
  color: #dad6d6
}
.footer-left, .footer-right{
  align-self: flex-end;
  padding-bottom: 5px
}
.highlight{
  font-weight: 500;
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #ebebeb;
}
.g-recaptcha{
  margin: 0 auto;
  width: 304px;
}
.menu-logined{
  float: right;
  border-right: none!important;
}
.menu-search{
        padding-top: 30px;
}
#input-search{
        height: 36px
}
.menu-search input{
        border-radius: 50px 0 0 50px; /* left rounded, right square for input-group */
        box-shadow: 1px 1px 2px #999999 inset;
        border: none;
}
.menu-list > li {
        padding-left: 10px;
        padding-right:10px;
        border-right: 1px solid #f36c6b;
}
.menu-list > li:last-child{
        border-right: none;
}
.menu-list > li > a{
        padding: 5px 5px;
        letter-spacing: 2px;
}
.menu-left{
        padding-right: 35px;
        border-right: 2px solid #f36c6b;
}
ul.navbar-nav{
        padding-top: 10px;
}
ul.navbar-nav li a{
        text-transform: uppercase!important;
        font-weight: bold;
        color: #242424!important;
}
.menu-search input.form-control::-webkit-input-placeholder {
        color: #aa5f60;
        font-weight: bold;
}

input.form-control:-moz-placeholder { /* Firefox 18- */
        color: #aa5f60; 
        font-weight: bold;
}
.breadcrumb>li+li::before{
  content: none;
}
.breadcrumb{
  display: -webkit-inline-box;
  padding: 5px 10px;
  background: #d7d7d7;
  border-radius: 0px;
  margin-bottom: 10px;
  margin-top: -10px;
}

.navbar-brand{
  padding: 0px 5px 0px 5px;
}
.badge{
  border-radius: 0px;
  background: #93c120;
}
.midle{
  vertical-align: middle!important;
}
label{
  font-weight: 700!important;
}
.menu-li{
  display: -webkit-box!important;
  -webkit-box-align: baseline;
}
input.form-control::-moz-placeholder {  /* Firefox 19+ */
        color: #aa5f60; 
        font-weight: bold;
}
h1.block-title{
  max-width: 850px;
}
.logo-block{
  width: 200px;
  float: right;
}
.logo-block img, img.logo-block-xs{
  width: 100%;
  object-fit: cover;
  border: 2px solid #dedede;
  background: #fff;
  box-shadow: 0 7px 10px #999;
  padding: 7px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.dropdown-menu>li>a:hover{
  background: inherit;
  color: #e71c29!important;
}
.jumbotron{
  margin-bottom: 20px;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover{
  background: inherit;
  color: #e71c29!important;
}
.form-inline .form-group{
  margin-right: 5px;
}
ul.faminus {
  list-style: none;
  padding: 0;
}
ul.faminus li {
  padding-left: 1.3em;
}
li.fa-minus:before{
  content: "-";
  display: inline-block;
  margin-left: 5px;
  padding-right: 3px;
}

input.form-control:-ms-input-placeholder {  
        color: #aa5f60;  
        font-weight: bold;
}
button.btn-search{
        border-radius: 0 50px 50px 0; /* left square, right rounded for input-group */
        box-shadow: 0px 1px 2px #999999 inset;
        background: #e74340;
        border-left: none;
        border-right: none;
        border-top-color:#999999; 
        border-bottom-color: #ffffff;
        padding: 6px 12px;
}
.search-icon{
        color: #ffffff;
        font-size: 22px;
}
#btn-search:focus, #btn-search:focus:active{
        background: #e74340
}
button.btn-search.btn-default:hover{
        color: #e74340!important;
}
.btn-login{
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0px!important;
        padding-top: 30px!important;
        padding-bottom: 30px!important;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 20px;
        color: #da0f1d;
}
.btn-login img{
  height: 38px;
}
.btn-logout{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0px!important;
  padding-top: 18px!important;
  padding-bottom: 20px!important;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 20px;
  color: #da0f1d;
}
.fa-3{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 2em;
}
a.btn-login:hover, a.btn-login:focus, a.btn-login:active{
        /*background: transparent;*/
        color: #93c120!important;
}
.content{
        margin-top: 40px;
        margin-bottom: 100px;
}

.footer-left a{
        color: #ffffff;
        cursor: pointer;
        text-decoration: none;
        padding: 5px 5px 5px 0px;
        border-right: 1px solid #ffffff;
}
.footer-right a{
        color: #ffffff;
        cursor: pointer;
        text-decoration: none;
        padding: 5px 0px 5px 5px;
        border-left: 1px solid #ffffff;
}
.card{
  background: #fff;
        box-shadow: 3px 3px 5px 0px #888888;
        width: 100%;
        min-height: 150px;
        position: relative;
}
.card-border{
        border: 1px solid #888888
}
/*
.carousel-control{
        top: auto;
  height:auto;
        width: auto;
        bottom: 20px;
        background: #e9e6e3;
  background-image: none;
        padding: 5px 15px;
        border: 2px solid red;
        border-radius: 50px;
}
.carousel-control.left {
        left: 40px;
  background-image: none;
}
.carousel-control.right {
        left: 100px;
        right: auto;
        background-image: none;
}
#carousel .carousel-inner{
        max-height: 350px
}
.carousel-inner>.item>img{
        max-height: 100%;
        width: 100%
}
*/
.btn{
        border-radius: 50px 50px 50px 50px;
        padding: 8px 25px;
}
.btn-right{
        float: right;
}
.btn-outline{
        padding: 6px 25px;
}
div.vertical-line{
        width: 100%;
        height: 50px;
        border-right: 2px solid #da0f1d;
}

.nomargin-lr{
        margin-left: 0px;
        margin-right: 0px;
}
.home-h2{
        font-weight: normal;
        height: 130px;
        width: 100%;
        position: relative;
        font-size: 30px;
        font-weight: normal;
}
.home-h2 span{
        position: absolute;
        bottom: 5px;
        font-weight: 200;
        padding-right: 10px
}
span pre{
  white-space: inherit;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  display: inline-flex;
  font-size: 14px;
  background: none;
  border: none;
  margin-bottom: 0px;
  padding: 0px;
  font-family: 'Fira Sans', sans-serif;
}
.home-box{
        width: 100%;
        height: 180px;
        position: relative;
}
.home-text{
        width: 100%;
        height: 120px;
        padding: 20px;
        overflow: auto;
}
.box-greenlight{
        background: #e6f6c9
}
.btn-red{
        background: #e71c29;
  color: #fff;
}
.btn-gray{
  background: #494949;
  color: #ffffff;
}
.btn-graylight{
        background: #eee;
        color: #000;
}
.btn-primary{
  background-color: #e71c29;
  border-color: #e71c29;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active,
.btn-primary.active,.btn-primary:active:hover,
.btn-primary.active:hover,.btn-primary:active:focus,
.btn-primary.active:focus{
  background-color: #e71c29;
  border-color: #e71c29;
}
.btn-primary:hover,.btn-primary:active:hover,.btn-primary.active:hover,.btn-primary:active:hover,
.btn-success:hover,.btn-success:active:hover,.btn-success.active:hover,.btn-success:active:hover,
.btn-danger:hover,.btn-danger:active:hover,.btn-danger.active:hover,.btn-danger:active:hover,
.btn-red:hover,.btn-red:active:hover,.btn-red.active:hover,.btn-red:active:hover{
box-shadow: 2px 3px 8px 4px rgba(0, 0, 0, 0.25), 4px 9px 12px 4px rgba(0, 0, 0 , 0.19)
}
.navbar-default .navbar-toggle{
  border-color: transparent
}
hr.line-20{
  margin-right:100%;
        width: 50px;
        border: 1px solid #da0f1d;
        margin-left: 0px;
        margin-top: 2px;
        margin-bottom: 2px;
}
.hbox-right-header{
        padding: 15px
}
.hbox-right-header h3{
        margin:0px;
}
.hbox-right-list{
        list-style-type: none;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px
}
.hbox-right-list li{
        margin-bottom: 10px
}
.hbox-right-list li a{
        width: 100%
}
.icon-btn{
        font-size: 30px;
        width: 50px;
        height: 50px;
        background: #e71c29;
        float: left;
        border-radius: 30px;
        font-weight: 300;
        text-align: center;
        margin-right: 15px
}
.icon-btn i{
        line-height: 50px
}
.hbox-right-list li span{
        padding: 5px 0px;
        text-align: left;
        font-size: 20px;
        font-weight: 200;
        color: #ffffff;
        word-break: keep-all;
}
.btn-no-white-space{
        white-space: normal;
        text-align: initial;
        padding: 6px 6px;
}
.table-event{
        max-height: 250px;
        overflow: auto;
}
.hbox-right-footer button{
        text-align: center;
}
.btn-event{
        margin-top: 5px;
        margin-bottom: 10px;
}
.insert-icon{
        float: right;
}
.table-ev>tbody>tr:nth-child(odd)> .td-bold{
        background: #f3cccc;
}
.table-ev>tbody>tr:nth-child(odd)> .td-light{
        background: #f9e3e3;
}
.table-ev>tbody>tr:nth-child(even)> .td-bold{
        background: #d7d9c4;
}
.table-ev>tbody>tr:nth-child(even)> .td-light{
        background: #f6f6f0;
}
.table-ev>tbody>tr.is-past-event:nth-child(odd)> .td-bold{
        background: #6699CC;
}
.table-ev>tbody>tr.is-past-event:nth-child(odd)> .td-light{
        background: #b7c9e2;
}
.table-ev>tbody>tr.is-past-event:nth-child(even)> .td-bold{
        background: grey;
}
.table-ev>tbody>tr.is-past-event:nth-child(even)> .td-light{
        background: lightgrey;
}
.footer-icon{
        text-align: right;
}
.footer ul{
        list-style-type: none;
        padding-left: 0px
}
.text-small{
        font-size: 10px
}
#login-modal .modal-header, #login-modal .modal-footer{
        border: none;
}
button.close{
        border: 2px solid #f51329;
        width: 32px;
        height: 32px;
        border-radius: 50px;
}
button.close span{
        color: #f51329;
}
*:focus, .btn:focus {
        outline: 0!important;
}
.modal-logo{
        width: 100%;
        padding-top: 50px;
}
#login-modal .modal-dialog{
        max-width: 500px;
}
#login-modal h3{
        margin-top: 0px
}
#login-modal .modal-body, #login-modal .modal-footer{
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 0px
}
#login-modal .modal-footer{
        padding-top: 30px;
        display: flex;
        display: -webkit-flex;
        align-items: baseline;
}
input.form-control, select.form-control, textarea.form-control{
        border-color: #f8455c;
  min-height: 40px;
}
input.form-control{
  height: 40px;
}
.text-danger{
        color: #f8455c;
}
.no-pad-l{
        padding-left: 0px;
}
.no-pad-r{
        padding-right: 0px;
}
input[type=checkbox]{
        margin: 1px 0 0;
        height: 18px;
        width: 18px;
}
input[type=checkbox]:after {
        content: " ";
        height: 18px;
        width: 18px;
        background-color: #ffffff;
        display: inline-block;
        visibility: visible;
        border: 1px solid #7e7e7e;
        border-radius: 5px 
}
#keep-connect{
        margin-left: -25px;
}

input[type=checkbox]:checked:after{
        font-family: 'FontAwesome';
        content: "\f00c";
        font-size: 15px;
        background-color: #8dd78e
}
.padding-70{
        padding-left: 70px;
        padding-right: 70px;
}
.btn-regis{
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #ffffff;
        color: #e71c29;
}
textarea:focus, input:focus, .uneditable-input:focus, select:focus {   
    border-color: rgba(231, 28, 41, 1) !important;
    border: 3px solid;
}
.close{
        opacity: 1
}
.navbar-default .navbar-toggle .icon-bar{
  background: red;
}
.panel-default{
  border: none;
  background: #ffffff;
  box-shadow: 0px 3px 5px #888888;
  border-radius: 0;
  height: 260px;
}
.panel-body{
  height: 100%;
  padding: 0px;
}
.panel-body .box-xl{
  position: relative;
  height: 100%;
}
.panel-body .box-xl img{
  height: 100%;
  object-fit: cover;
}
.box-heading{
  border-radius: 0;
  font-weight: 200;
  border:none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.box-xl{
  position: relative;
  height: 100%;
  width: 100%;
  border-bottom: 1px solid rgba(224, 224, 224, .9);
}
.box-xl .box-btn{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  text-align:center;
  padding: 20px 10px;
}

.flex{
  display: flex;
}
.box-xl .box-heading .title{
  padding: 10px 15px;
  color: #fff;
  font-size: 25px;
  background: #e71c29;
  line-height: 1.5em;
}
.box-xl .box-heading .desc-top{
  max-height: 200px;
  overflow: auto;
  padding: 15px 20px;
  background-color: rgba(255,255,255,.8);
  color: #000;
  font-weight: 400
  filter: alpha(opacity=80);
}
.box-xl .desc-bottom{
  max-height: 100px;
  overflow: auto;
  padding: 15px 20px;
  position: absolute;
  bottom: 0;
  background-color: rgba(255,255,255,.8);
  color: #000;
  left:0;   /** new  **/
  right:0;  /** new  **/
  filter: alpha(opacity=80);
}
.font-30{
  font-size: 30px
}
.font-20{
  font-size: 20px;
}
.table.list thead{
  background: #f7b0b2;
  border-bottom: 0px;
  border-collapse: initial;
  box-shadow: none;
}
.table.list thead tr th{
  border-bottom: 0px;
  box-shadow: none;
}
.table.list tbody>tr>td{
border: none;
}
.table.list tbody>tr:nth-child(even){
  background: #f4e9e9
}
.table.list tbody>tr:nth-child(odd){
  background: #f8f6f6
}
.user-block{
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.user-block img{
  width: 40px;
  height: 40px;
  flex-shrink: 0; /* prevent image from shrinking in flex container */
}
.user-block span{
  display: block;
  margin-left: 10px;
}
.whww span{
  display: block;
}
span.light{
  color: #999;
}
.profile{
  padding: 25px 50px;
}
.profile span br{
  display: none;
}
.line span b{
  text-transform: uppercase;
}
.profile .box-img{
  position: absolute;
  right: 50px;
  top: 20px;
  width: 212px;
  height: 250px;
}
.profile .box-img img{
  width: 212px;
  height: 212px;
  border-radius: 50%;
  border: 2px solid #dedede;
  background: #fff;
  padding: 7px;
  box-shadow: 0 7px 10px #999;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.profile span, .line span{
  display: block;
  padding-bottom: 10px;
}
.profile span b, .line span b{
  padding-right: 10px;
}
.profile span ul, .line span ul{
  display: inline-table;
  margin-bottom: 0px;
  padding-left: 0px;
}
.profile span ul li, .line span ul li{
  list-style-type: none;
}
.profile-footer{
  padding: 10px;
  background: #dadada;
  text-align: right
}
.wrapper{
  background: #ffffff;
  box-shadow: 3px 3px 5px 0px #888888;
  padding: 10px 20px;
  position: relative;
}
.block-text{
  padding-bottom: 5px;
  color: rgb(140, 140, 140)
}
.btn.btn-small{
  padding: 5px 25px;
  background: #ffffff;
  border: 2px solid #000;
}
.flex.midle{
  align-items: baseline;
}
.table>tbody>tr.midle-row>td{
  vertical-align: middle;
}
.btn.btn-download{
  padding: 6px 10px;
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 50px
}
.jumbotron{
  border-radius: 0px!important;
  padding: 0px 10px 10px 10px!important;
  box-shadow: 3px 3px 5px 0px #888888;
}
.jumbotron p{
  font-size: 14px;
  margin-top: 15px
}


@media (max-width: 768px) { 
  .menu-list > li {
    border-right: none;
    text-align: center;
    font-size: 25px;
  }
  .dropdown-menu>li>a{
    text-align: center;
  } 
  .menu-li{
    display: block;
  }
  img.logo{
    max-width: 70px;
    max-height: 70px;
  }
  .head-logo-text{
    text-align: center;
  }
  .head-logo-text{
    font-size: 20px;
    margin-top: 10px;
    margin-left: -25px;
  }
  img.logo-text{
    width: 180px;
    margin-left: -25px;
  }
  .menu-left{
    border: none;
  }
  .navbar-default .navbar-form{
    border: none;
  }
  .navbar-default .navbar-collapse{
    background: rgba(255,255,255,.7);
  }
  .btn-login, .btn-logout{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 50px!important;
    padding-top: 15px!important;
    margin-bottom: 15px;
  }
  .btn-logout .fa-3{
    font-size: 2em;
    margin-left:15px;
  }
  .btn-logout{
    font-size: 20px;
    padding-left: 15px
  }
  .fr-xs{
    float: right;
  }
  .navbar-nav{
    margin-bottom: 50px
  }
  .profile{
    text-align: center
  }
  .profile .box-img{
    position: static;
    margin-bottom: 20px;
    width: 100%;
  }
  .profile span br {
    display: block
  }
  .profile-footer{
    text-align: center
  }
  .footer{
    position: static;
  }
  .nomargin-lr button{
    margin-bottom: 10px
  }
  .home-h2{
    height: inherit;
  }
  div.vertical-line{
    border-right: none;
    border-bottom: 2px solid #da0f1d;
    width: 50px
  }
  .form-horizontal .form-group{
    margin-left: 0px;
    margin-right: 0px;
  }
  .login .form-group button {
    width: 100%
  }
  .panel-default{
    height: 235px;
  }
}

table.table-hover tr {
  cursor: pointer;
}

#id_honeypot {
    display: none;
}
.panel-default.comment-pan{
  height: auto;
}
.comment-pan .panel-heading{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  background: #d7efc3;
}
.unpub .comment-pan .panel-heading{
  background: #ddd;
  color: #333;
}
.heading-btn-group li{
  float: left;
  margin-left: 5px;
  list-style: none;
}
.comment-list .row {
  margin-bottom: 0px;
}
.comment-list .panel .panel-heading {
  border:none;
  border-top-right-radius:0px;
  top: 1px;
}
.comment-list .panel .panel-body {
  padding: 10px;
}
@media (min-width: 992px){
  .menu-list {
    justify-content: end;
    margin-right: -15px;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .menu-list > li {
    padding:0px 4px;
  }
  .panel-default{
    height: 260px;
  }
}
@media (min-width: 768px) {
  .comment-list .arrow:after, .comment-list .arrow:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
  }
  .comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:before {
    border-left: 0;
  }
  .comment-list .panel.arrow.left:before {
    left: -10px;
    top: 11px;
    border-right-color: #e71c29;
    border-width: 10px;

  }
  .comment-list.unpub .panel.arrow.left:before, .comment-list.unpub .panel.arrow.left:after{
    border-right-color: #ddd;
  }
  .comment-list .panel.arrow.left:after {
    left: -10px;
    top: 12px;
    border-right-color: #e71c29;
    border-width: 9px;
  }
}
@media (max-width: 1365px) and (min-width: 992px){
  h1.block-title{
    max-width: 700px
  }
  .panel-default{
    height: 260px;
  }
}
@media (max-width: 991px){
  h1.block-title{
    max-width: 500px
  }
}
@media (max-width: 768px){
  h1.block-title{
    max-width: 100%
  }
  img.logo-block-xs{
    max-width: 250px;
    margin-bottom: 10px;
  }
}
/* Item 1 fix: the legacy fixed-width override on Bootstrap's .container
   (width:1170px!important) forced every nested .container to overflow its
   parent column, pushing the homepage intro text behind the "Eventi" box.
   Removed so the native Bootstrap 5 responsive container is used instead
   of overwriting the framework class. */
@media (max-width: 1600px){
  .btn{
    padding: 5px 10px;
  }
}
@media (min-width: 1600px){
 .table-event{
    height: 303px;
    max-height: 303px;
  }
}
@media (min-width: 1366px) and (max-width: 1599px){
  .table-event{
    height: 349px!important;
    max-height: 349px!important
  }
}
@media (max-width: 1200px){
  .table-event{
    height: 299px;
    max-height: 299px;
  }

}
@media (min-width: 1201px) and (max-width: 1365px){
  .table-event{
    height: 272px;
    max-height: 272px;
  }
}
/* Item 1 fix (cont.): legacy .container{width:970px} override removed for
   the same reason — rely on Bootstrap 5's native responsive container. */
@media (max-width: 990px){
  .vertical-line{
    height: 0px!important;
  }
}
@media (min-width: 769px) and (max-width: 1600px){
  body{font-size: 14px}
  img.logo{
    max-width: 120px;
    max-height: 120px;
  }
  h1{
    font-size: 32px;
  }
  h2{
    font-size: 26px;
  }
  h3{
    font-size: 20px;
  }
  .panel-body .box-xl img {
    height: 100%;
  }
  .btn-logout{
    padding-bottom: 13px!important
  }
  .navbar-default{
    box-shadow: 0px 9px 12px #888888;
  }
  .footer{
    min-height: 40px;
    padding-top: 8px;
  }
  .menu-search{
    padding-top: 16px
  }
  #input-search{
    height: 29px;
  }
  .menu-left{
    padding-right: 28px;
  }
  button.btn-search{
    padding: 5px 10px
  }
  .search-icon{
    font-size: 18px;
  }
  .btn-login{
    padding-top: 21px!important;
    padding-bottom: 21px!important;
    font-size: 16px;
  }
  .btn-login img {
    width: 40px;
    height: 40px;
  }
  .btn-logout{
    padding-top: 14px;
    padding-bottom: 16px;
    font-size: 16px;
  }
  .fa-3{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .content {
    margin-top: 40px;
    margin-bottom: 96px;
  }
  .footer-left a{
    padding: 8px 8px 8px 0px;
  }
  .footer-right a{
    padding: 8px;
  }
  .card{
    min-height: 120px;
  }

  .home-box{
    height: 145px;
  }
  .home-text{
    height: 95px;
    padding: 15px
  }
  .hbox-right-header{
    padding: 12px
  }
  .hbox-right-list{
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px
  }
  .hbox-right-list li {
    margin-bottom: 8px
  }
  .icon-btn{
    font-size: 25px;
    width: 40px;
    height: 40px;
    margin-right: 12px
  }
  .icon-btn i {
    line-height: 40px;
  }
  .hbox-right-list li span{
    padding: 4px 0px;
    font-size: 16px
  }
  .btn-no-white-space{
    padding: 5px;
  }
  .btn-event{
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .text-small{
    font-size: 8px
  }
  button.close{
    width: 25px;
    height: 25px
  }
  .modal-logo{
    padding-top: 40px
  }
  #login-modal .modal-dialog{
    max-width: 400px;
  }
  #login-modal .modal-body, #login-modal .modal-footer{
    padding-left: 32px;
    padding-right: 32px
  }
  #login-modal .modal-footer{
    padding-top: 25px
  }
  input.form-control, select.form-control, textarea.form-control{
    min-height: 32px
  }
  input.form-control{
    height: 32px
  }
  input[type=checkbox], input[type=checkbox]:after{
    height: 15px;
    width: 15px
  }
  #keep-connect{
    margin-left: -20px
  }
  input[type=checkbox]:checked:after{
    font-size: 12px
  }
  .padding-70{
    padding-left: 55px;
  padding-right: 55px
  }
  .box-xl .box-btn{
    padding: 15px 8px
  }
  .box-xl .box-heading .title{
    padding: 8px 12px;
    font-size: 20px
  }
  .box-xl .box-heading .desc-top{
    max-height: 160px;
    padding: 12px 16px;
    font-weight: 300;
  }
  .box-xl .desc-bottom{
    max-height: 80px;
    padding: 12px 16px
  }
  .font-30{
    font-size: 24px
  }
  .font-20{
    font-size: 16px
  }
  .user-block img{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .user-block span{
    margin-left: 8px;
  }
  .profile{
  padding: 20px 40px;
  }
  .profile .box-img{
    width: 170px;
    height: 200px;
  }
  .profile .box-img img{
    width: 170px;
    height: 170px;
  }
}

.tooltip-inner{
    min-width: 100px;
    max-width: 100%; 
}
video{
  width: 100%;
}
iframe{
  width: 100%;
}
input.form-control-danger, textarea.form-control-danger, select.form-control-danger{
  background-color: yellow;
}
.has-error input[type=checkbox], .has-error input[type=checkbox]:after{
  background-color: yellow !important;
  color: black !important;
}
#error_1_id_accept_terms, #error_1_id_confirmation, #error_1_id_captcha{
  background-color: yellow;
}

.modal2 {
  position: fixed; /* Stay in place */
  z-index: 1001; /* Sit on top */
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2-content {
  background-color: #fefefe;
  margin: 100px auto;
  padding: 20px;
        max-width: 600px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
}

.modal2-content label {
  max-width: 500px;
}

.mb-1 {
  margin-bottom: 0.5em;
}

.d-flex {
  display: flex;
}

.d-flex input[type=radio] {
  margin: 0;
}



/* ============================================================
   Bootstrap 5 compatibility overrides
   The legacy stylesheet above was written for Bootstrap 3 markup
   (.navbar-default, .panel-default, fixed-width .container). The
   modernised templates emit Bootstrap 5 markup, so the rules below
   re-map those legacy visuals onto the new class names.
   Kept at the end of the file so they win by cascade order.
   ============================================================ */

/* --- Item 6: navbar drop shadow ---
   Custom class added to the <nav> element in base.html so we don't
   restyle Bootstrap's own .navbar class. */
.navbar-shadow {
  background: #ffffff;
  box-shadow: 0px 10px 15px #888888;
}

/* --- Item 2: tile / "piastrella" plugin fixed height ---
   .body-full is a custom class placed on the tile card in tile.html.
   Styling that custom class (and scoping its children) keeps every tile
   exactly 260px with the image stretched to cover it, without changing
   Bootstrap's global .card / .card-body behaviour. */
.body-full {
  height: 260px;
  border: none;
  border-radius: 0;
  box-shadow: 0px 3px 5px #888888;
  overflow: hidden;
}
.body-full .card-body {
  height: 100%;
  padding: 0;
}
.body-full .card-body > a {
  display: block;
  height: 100%;
}
.body-full .box-xl {
  height: 100%;
  width: 100%;
}
.body-full .box-xl img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#searchForm .row {
  align-items: baseline;
}