File: upload/themes/bb_simple/assets/css/custom.css

.btn-none
{
    background-color: #cbcbcb;border: 1px;
}
.btn-checked
{
    background-color: #198754;border: 1px;
}

.hide
{
    display: none;
}

img
{
    width: 100%;
}

a
{
    color: #000;
    text-decoration: none;
}
h6
{
    font-size: 14px;
}

.block
{
    display: block;
}

.margin-top-10
{
    margin-top: 10px;
}

.margin-top-20
{
    margin-top: 20px;
}

.margin-top-30
{
    margin-top: 30px;
}

.margin-top-50
{
    margin-top: 50px;
}

.margin-top-70
{
    margin-top: 70px;
}

.margin-top-100
{
    margin-top: 100px;
}

.margin-bottom-10
{
    margin-bottom: 10px;
}

.margin-bottom-20
{
    margin-bottom: 20px;
}

.margin-bottom-30
{
    margin-bottom: 30px;
}

.margin-bottom-50
{
    margin-bottom: 50px;
}

.margin-bottom-70
{
    margin-bottom: 70px;
}

.margin-bottom-100
{
    margin-bottom: 100px;
}

.margin-left-10
{
    margin-left: 10px;
}

.margin-left-20
{
    margin-left: 20px;
}

.margin-left-30
{
    margin-left: 30px;
}

.margin-left-50
{
    margin-left: 50px;
}

.margin-left-70
{
    margin-left: 70px;
}

.margin-left-100
{
    margin-left: 100px;
}

.margin-right-10
{
    margin-right: 10px;
}

.margin-right-20
{
    margin-right: 20px;
}

.margin-right-30
{
    margin-right: 30px;
}

.margin-right-50
{
    margin-right: 50px;
}

.margin-right-70
{
    margin-right: 70px;
}

.margin-right-100
{
    margin-right: 100px;
}

.padding-top-10
{
    padding-top: 10px;
}

.padding-top-20
{
    padding-top: 20px;
}

.padding-top-30
{
    padding-top: 30px;
}

.padding-top-50
{
    padding-top: 50px;
}

.padding-top-70
{
    padding-top: 70px;
}

.padding-top-100
{
    padding-top: 100px;
}

.padding-bottom-10
{
    padding-bottom: 10px;
}

.padding-bottom-20
{
    padding-bottom: 20px;
}

.padding-bottom-30
{
    padding-bottom: 30px;
}

.padding-bottom-50
{
    padding-bottom: 50px;
}

.padding-bottom-70
{
    padding-bottom: 70px;
}

.padding-bottom-100
{
    padding-bottom: 100px;
}

.padding-left-10
{
    padding-left: 10px;
}

.padding-left-20
{
    padding-left: 20px;
}

.padding-left-30
{
    padding-left: 30px;
}

.padding-left-50
{
    padding-left: 40px;
}

.padding-left-70
{
    padding-left: 70px;
}

.padding-left-100
{
    padding-left: 100px;
}

.padding-right-10
{
    padding-right: 10px;
}

.padding-right-20
{
    padding-right: 20px;
}

.padding-right-30
{
    padding-right: 30px;
}

.padding-right-50
{
    padding-right: 50px;
}

.padding-right-70
{
    padding-right: 70px;
}

.padding-right-100
{
    padding-right: 100px;
}

.navbar-bg
{
    background-color: #579DDF;
   
}

.navbar-bg .navbar-nav .nav-link
{
    color: #fff;
}

body
{
    background-color: #ffffff;
}

.pull-right
{
    float: right;
}

.pull-left
{
    float: left;
}

.ul-nostyle
{
    list-style: none;
}

.ul-nostyle.no-padding
{
    padding: 0px;
}

.ul-nostyle.break-point > li
{
    border-bottom: 1px solid #cbcbcb;
    padding-bottom: 10px;
    padding-top: 10px;
}

.btn-none
{
    background-color: #cbcbcb;
}

.container-custom
{
    border:1px solid #F5F5F5;
    /* background-color: #ffffff; */
    box-shadow: 0px 2px 10px #aaaaaa;
    padding:0px;
}
.font-14
{
    font-size: 14px;
}


.bg-blue
{
    background-color: #579DDF;
}

.card-body
{
    background-color: #ffffff;
}

.input-control
{
    height: 35px;
    width: 50px;
    min-width: 50px;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}


.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1)
}

.search input {
    height: 45px;
    width: 220px;
    /* text-indent: 25px; */
    border: 2px solid #d6d4d4;
    font-size:13px;
}

.search input:focus {
    box-shadow: none;
    border: 2px solid blue
}

.search .search-icon {
    position: absolute;
    top: 20px;
    left: 16px
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 35px;
    width: 50px;
    background: blue
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link
{
    color: #ffffff;
    background-color: #579DDF;
}

.nav-link
{
    color: #000000;
}

.select2-container
{
    display: inline-block;
}

.select2-container .select2-selection--single
{
    height: 35px;
}

.select2-container
{
    vertical-align: top;
}
.select2-container .select2-selection--single .select2-selection__rendered
{
    padding-top: 3px;
}

.page-link
{
    color: #000 !important;
}

.avartar-dymamic
{
    min-width:40px;
    min-height:38px;
    font-size: 17pt;
    border-radius:0px;
    background-color: #5c7a1f; 
    color: #b8db70;
    text-align:center;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.avartar-dymamic.size-20
{
    min-width:45px;
    min-height:42px;
    font-size: 20pt;
}
.avartar-dymamic.post-avatar
{
    min-height: 167px;
    font-size: 79pt;
    border-radius: 0px;
    width: 100%;
}

.avartar-dymamic-a
{
    background-color: #523314; 
    color: #d18c47;
}
.avartar-dymamic-b
{
    background-color: #EF931F; 
    color: #dfdfdf;   
}
.avartar-dymamic-c
{
    background-color: #15A1C0; 
    color: #51D8F5;   
}
.avartar-dymamic-d
{
    background-color: #5151F5; 
    color: #8D8DF0;   
}
.avartar-dymamic-e
{
    background-color: #C525F8; 
    color: #DA83F6;   
}
.avartar-dymamic-f
{
    background-color: #C3B914; 
    color: #ECE46B;   
}
.avartar-dymamic-g
{
    background-color: #CF1B36; 
    color: #F07C8D;   
}
.avartar-dymamic-h
{
    background-color: #C3B914; 
    color: #ECE46B;  
}
.avartar-dymamic-i
{
    background-color: #C3B914; 
    color: #ECE46B; 
}
.avartar-dymamic-k
{
    background-color: #C525F8; 
    color: #DA83F6;   
}
.avartar-dymamic-l
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-m
{
    background-color: #5151F5; 
    color: #8D8DF0;  
}
.avartar-dymamic-n
{
    background-color: #C3B914; 
    color: #ECE46B;  
}
.avartar-dymamic-o
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-p
{
    background-color: #C525F8; 
    color: #DA83F6;   
}
.avartar-dymamic-q
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-r
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-s
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-t
{
    background-color: #15A1C0; 
    color: #51D8F5;   
}
.avartar-dymamic-v
{
    background-color: #CF1B36; 
    color: #F07C8D;  
}
.avartar-dymamic-w
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-x
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}
.avartar-dymamic-y
{
    background-color: #C3B914; 
    color: #ECE46B;
}
.avartar-dymamic-z
{
    background-color: #5c7a1f; 
    color: #b8db70;   
}

.wrap_smiles_img
{
    min-height: 350px;
    max-height: 350px;
    width: 100%;
    overflow: scroll;
    overflow-y: scroll;
}
.smile_img
{
    /* min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px; */

    width: auto;
    cursor: pointer;
    margin-right: 5px;
}


/*lds-roller*/
.lds-roller.style1 {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .lds-roller.style1 div {
    animation: lds-roller-style1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
  }
  .lds-roller.style1 div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3c8dbc;
    margin: -3px 0 0 -3px;
  }
  .lds-roller.style1 div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller.style1 div:nth-child(1):after {
    top: 50px;
    left: 50px;
  }
  .lds-roller.style1 div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller.style1 div:nth-child(2):after {
    top: 54px;
    left: 45px;
  }
  .lds-roller.style1 div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller.style1 div:nth-child(3):after {
    top: 57px;
    left: 39px;
  }
  .lds-roller.style1 div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller.style1 div:nth-child(4):after {
    top: 58px;
    left: 32px;
  }
  .lds-roller.style1 div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller.style1 div:nth-child(5):after {
    top: 57px;
    left: 25px;
  }
  .lds-roller.style1 div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller.style1 div:nth-child(6):after {
    top: 54px;
    left: 19px;
  }
  .lds-roller.style1 div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller.style1 div:nth-child(7):after {
    top: 50px;
    left: 14px;
  }
  .lds-roller.style1 div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller.style1 div:nth-child(8):after {
    top: 45px;
    left: 10px;
  }
  @keyframes lds-roller-style1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  img
  {
      width: auto;
  }

  blockquote {
    background: #f9f9f9;
    border-left: 2px dashed #146c43;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
  }
  blockquote:before {
    color: #ccc;
    /* content: open-quote; */
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
  }
  blockquote p {
    display: inline;
  }

  
  blockquote.quote {
    border-left: 2px solid #ccc;
    
  }
  blockquote.quote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
  }


  .facebook-reaction{
    /* max-width:100%; */
    /* margin:150px auto; */
    /* padding:0 60px; */
    display: inline-block;
  }
  
  .like-btn {
    font-weight: bold;
    color: #7f7f7f;
    position: relative;
    cursor: pointer;
    padding: 20px 20px 0 0;
  }
  
  .like-btn:hover {
    text-decoration: underline;
  }

  .like-btn-emo img
  {
    width: 16px;
    height: 16px;
    margin-bottom: 5px;  
  }

  .reaction-item
  {
    width: 16px;
    height: 16px;
    margin-bottom: 5px;    
  }
  
  .like-btn-default {
    background-image: url('../images/facebook.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -277px -446px;
  }
  
  .like-btn-emo {
    display: inline-block;
    margin: 0 6px -3px 0;
    width: 16px;
    height: 16px;
  }
  
  .reactions-box {
    height: 44px;
    width: 290px;
    padding: 10px;
    position: absolute;
    top: -25px;
    left: -14px;
    box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee;
    border-radius: 44px 44px;
    display: none;
    background-color: #ffffff;
  }
  
  .reaction {
    list-style-type: none;
    cursor: pointer;
    display: inline-block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 8px;
    opacity: 0;
    transform: scale(1, 1);
    transition: opacity .5s ease-in-out 1s, transform .07s ease-in-out 0s, top .07s ease-in-out 0s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
  }
  
  .like-btn:hover .reactions-box {
    display: block;
  }

  
  .reaction img
  {
      min-width: 30px;
      max-width: 30px;
      margin-right: 15px;
  }
  
  .like-btn:hover .reaction {
    opacity: 1;
    animation-name: reaction_delay;
    animation-duration: .5s;
  }
  
  @keyframes reaction_delay {
    0% {
      width: 48px;
      height: 48px;
      top: 60px;
    }
    48% {
      width: 56px;
      height: 56px;
      top: 5px;
    }	
    100% {
      width: 48px;
      height: 48px;
      top: 8px;
    }
  }
  

  
  .reaction:hover {
    transform: scale(1.3, 1.3);
    top: 2px
  }
  
  
  .reaction::before {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    line-height: 17px;
    font-size: .7em;
    width: 80%;
    height: 17px;
    margin-left: 10%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    position: absolute;
    top: -25px;
    opacity: 0;
    transition: opacity .2s ease-in-out 0s;
  }
  
  .reaction:hover::before {
    opacity: 1
  }
  
  .reaction-like::before {
    content: 'Like'
  }
  
  .reaction-love::before {
    content: 'Love'
  }
  
  .reaction-haha::before {
    content: 'Haha'
  }
  
  .reaction-wow::before {
    content: 'Wow'
  }
  
  
  .reaction-sad::before {
    content: 'Sad'
  }
  
  .reaction-angry::before {
    content: 'Angry'
  }
  
  .like-stat {
    margin-top: 10px;
  }
  
  
  .like-btn-like{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -17px -151px;
  }
  
  .like-btn-love{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 -168px;
  }
  
  .like-btn-haha{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 -151px;
  }
  
  .like-btn-wow{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -17px -185px;
  }
  
  .like-btn-sad{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -17px -168px;
  }
  
  .like-btn-angry{
    /* background-image: url('../images/reaction-small.png'); */
    background-repeat: no-repeat;
    background-size: auto;
    background-position: -17px -117px;
  }
  
  .like-btn-text-like {
    color:rgb(88, 144, 255);
  }
  .like-btn-text-wow,.like-btn-text-haha,.like-btn-text-sad {
    color:rgb(240, 186, 21)
  }
  .like-btn-text-love{
    color:rgb(242, 82, 104)
  }
  .like-btn-text-angry{
    color:rgb(247, 113, 75);
  }
  
  .like-emo > span{
      display: inline-block;
      margin: 0 -3px -3px 0px;
      width: 16px;
      height: 16px;
      border: 1px solid #EEE;
      border-radius: 50%;
  
  }
  
  .like-details{
    margin-left:10px;
    color:#9197a3;
    font-size:12px;
  }

  .share-url-list
  {
    list-style: none;
    margin:0px;
    padding:0px;
  }

  .share-url-list > li
  {
    display: inline-block;
    margin-right: 15px;
  }

  .thread-title
  {
    font-weight: 400;
  }

  .thread-title-sub
  {
    font-size: 16pt;
    display: block;
    margin-bottom: 10px;

  }

  .user-online-status
  {
    font-size: 8pt;
  }
  
  .pointer
  {
    cursor: pointer;
  }

  .effect {
    width: 100%;
    /* padding: 50px 0px 70px 0px; */
    /* background-color: #212121; */
 }
  .effect h2 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 25px;
    letter-spacing: 3px;
 }
  .effect:nth-child(2) {
    margin-top: 20px;
 }
  .effect:nth-child(2n+1) {
    background-color: #fff;
 }
  .effect:nth-child(2n+1) h2 {
    color: #212121;
 }
  .effect .buttons {
    margin-top: 20px;
    display: flex;
    /* justify-content: center; */
 }
  .effect a:last-child {
    margin-right: 0px;
 }
 /*common link styles !!!YOU NEED THEM*/
  .effect {
   /*display: flex;
    !!!uncomment this line !!!*/
 }
  .effect a {
    text-decoration: none !important;
    color: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 10px;
    font-size: 25px;
    overflow: hidden;
    position: relative;
 }
  .effect a i {
    position: relative;
    z-index: 3;
 }
  .effect a.fb {
    background-color: #3b5998;
 }
  .effect a.tw {
    background-color: #00aced;
 }
  .effect a.reddit {
    background-color: #dd4b39;
 }
  .effect a.pinterest {
    background-color: #cb2027;
 }
  .effect a.whatsapp {
    background-color: #44D682;
 }
  .effect a.g-plus {
    background-color: #dd4b39;
 }
  .effect a.dribbble {
    background-color: #ea4c89;
 }
  .effect a.pinterest {
    background-color: #cb2027;
 }
  .effect a.insta {
    background-color: #bc2a8d;
 }
  .effect a.in {
    background-color: #007bb6;
 }
  .effect a.vimeo {
    background-color: #1ab7ea;
 }
 /* aeneas effect */
  .effect.aeneas a {
    transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
 }
  .effect.aeneas a i {
    transition: transform 0.4s linear 0s;
 }
  .effect.aeneas a:hover {
    transform: rotate(360deg);
    border-radius: 50%;
 }
  .effect.aeneas a:hover i {
    transform: rotate(-360deg);
 }
 /* jaques effect */
  .effect.jaques a {
    transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
 }
  .effect.jaques a:hover {
    border-radius: 50%;
 }
 /* egeon effect */
  .effect.egeon a {
    transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
 }
  .effect.egeon a i {
    transition: transform 0.2s linear 0s;
 }
  .effect.egeon a:hover {
    transform: rotate(-90deg);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
 }
  .effect.egeon a:hover i {
    transform: rotate(90deg);
 }
 /* claudio effect */
  .effect.claudio a {
    transition: transform 0.2s linear 0s, border-radius 0.2s linear 0s;
 }
  .effect.claudio a:hover {
    transform: scale(1.2);
    border-bottom-left-radius: 50%;
    border-top-right-radius: 50%;
 }
 /* laertes effect */
  .effect.laertes a {
    transition: all 0.2s linear 0s;
 }
  .effect.laertes a i {
    transition: all 0.2s linear 0s;
 }
  .effect.laertes a:hover {
    border-radius: 50%/20%;
 }
  .effect.laertes a:hover i {
    transform: scale(1.1);
    text-shadow: 0 0 12px rgba(33, 33, 33, 0.6);
 }
 .tooltip-inner
 {
   background-color: #E65D45!important;
 }

 .thread-prefix
 {
   font-size: 10pt;
   padding:3px;
   border-radius: 3px;
   color: #fff;
 }

.home-forum-attr-thread
{
  position: relative;
  display: inline-table;
  margin-right: 15px;
  width: 100%;
}

.row-sub-forum
{
  padding-bottom: 10px;margin-bottom: 30px;border-bottom:1px solid #cbcbcb;
}
.cookie-notification {
    display: none;
    padding-right: 10px;
    padding-left: 10px;

    position: fixed;
    bottom: 0;
    left: 0;

    /* Set your cookie notification bar styles here */ 
    /*background-color: #fff;*/
    opacity: 0.8;

        display: block;
    background-color: #000;
    color: #ffff;
    width: 100%;
    padding-top: 10px;
    z-index: 99999;
}

.cookie-notification a
{
     color: #6498F3;   
}

.fade 
{
    display: none;
}
.show 
{
    display: block;
}