@font-face {
    font-family: myriadpro-regular;
    src: url('/lib/fonts/myriadpro-regular.woff2') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: myriadpro-bold;
    src: url('/lib/fonts/myriadpro-bold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
  font-family: myriadpro-black;
  src: url('/lib/fonts/myriadpro-black.woff2') format('woff2');
  font-display: swap;
}
@font-face {
	font-family: bogart-bold;
	src: url('/lib/fonts/bogart-bold.woff2') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: BalonkuRegular;
	src: url('/lib/fonts/BalonkuRegular.woff2') format('truetype');
	font-display: swap;
}

:root {
    --cafe-font-regular: 'myriadpro-regular', arial, helvetica, sans-serif;
    --cafe-font-bold: 'myriadpro-bold', arial, helvetica, sans-serif;
	--cafe-font-bold-alt: 'bogart-bold', arial, helvetica, sans-serif;
    --cafe-font-black: 'myriadpro-black', arial, helvetica, sans-serif;

    --bs-light: #E7EEF1;
    --bs-light: #f0f3f5;
    --bs-light: #f0f3f5;
}

.post-font, .post-font a, .post-font p{
    font-family: Georgia, serif;
    font-size:18px;
}
.post-font b, .post-font strong {
  font-family: Georgia, serif;
  font-weight: bold;
}
.post-font-sm, .post-font-sm a, .post-font-sm p{
    font-family: Georgia, serif;
    font-size:16px;
}

.bg-sand{
  background: #ffeddd;
  background: #fff7f1;
  background: #f9f6f3;
}

body, div, p {
    font-family: Georgia, serif;
    font-size:20px;
    
}
h1, h2, h3, h4, h5, .myriadpro-black, strong {
    font-family: 'myriadpro-black', arial, helvetica, sans-serif;
}
small {
  font-family: var(--cafe-font-regular);
  font-size:14px;
}
.myriadpro-regular {
  font-family: 'myriadpro-regular', arial, helvetica, sans-serif;
}
.myriadpro-bold {
	font-family: 'myriadpro-bold', arial, helvetica, sans-serif;
}
.myriadpro-black {
	font-family: 'myriadpro-black', arial, helvetica, sans-serif;
}
.bogart-bold {
  font-family: 'bogart-bold', arial, helvetica, sans-serif;
}

#nav-toggle {
    display: none;
}

/* Button styles
*/
.btn {    
    box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -3px 0 0 rgb(0 0 0 / 25%);
    font-family: var(--cafe-font-bold);
}
.btn:active, .btn.active {
    box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -1px 0 0 rgb(0 0 0 / 25%);
    transform: translate(0, 2px);
    transition: all .1s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #ff006e !important;
    border-color: #ff006e !important;
}


/* Bootstrap remove outline on focus for chat input
*/
*:focus {
  outline: none;
}
textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}


/* Background colors
*/
.bg-dark{
    background-color: black !important;
}
.bg-lila{
   background:#95ABFF !important;
   background: linear-gradient(#95ABFF, #788DEF) !important;
}
.bg-pink{
   background: #ffe2d6 !important;
   
   /*
   background: radial-gradient( #fcbe97, #fd95ae) !important;
   background: radial-gradient( #fcbe97, #fd95ae, white) !important;
   background: radial-gradient( white 0%, #fd95ae) !important;
   */
}

.bg-pink-gradient{
   background:#fd95ae !important;
   background: radial-gradient( #fcbe97, #fd95ae) !important;
   background-attachment: fixed !important;
}

.bg-light-gradient{
    background-color: #DDE4EB;
    background-image: linear-gradient(0deg, #DDE4EB 0%, #FFFFFF 100%);	
}
.bg-info{
    background-color: #D2E2E8 !important; /* grey blue */
    background-color: #cde6f7 !important; /* blue */
}
.bg-primary{
    background-color: #ff006e !important;
    border-color: #ff006e !important;
}
.bg-unread{
    background-color: #0d6efd!important;
}
.bg-light {
    background-color: var(--bs-light) !important;
}

/* Extra rounded corners
*/
.rounded-extra {
    border-radius: 1rem !important;
}

.rounded-top-extra {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
@media only screen and (max-width: 768px) { /* Hide rounded for mobile use */
    .mobile-header.rounded-top-extra {
        border-top-left-radius: 0rem !important;
        border-top-right-radius: 0rem !important;
    }
    .post-body img.rounded-top-extra {
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
    }
}
.rounded-bottom-extra {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.rounded-start-extra {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}
.rounded-end-extra {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
@media only screen and (max-width: 768px) { /* Hide rounded for mobile use */
     .rounded-sm-none {
        border-radius: 0 !important;
        border-top-left-radius: 1rem !important;
        border-bottom-left-radius: 1rem !important;
    }
}

/* for menu items that have a border */
.border-transparent {
    border: 1px solid transparent;
}


/* Custom fixes needed for desktop 
@media only screen and (min-width: 767px) { 
    .rounded-extra-bottom-end-none {
         border-bottom-right-radius:1rem !important;
    }
}
*/

/* Change the text (state) of the toggle button
*/
.text-toogle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toogle[aria-expanded=true] .text-collapsed {
  display: none;
}
.dropup-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
}

/* User status colors
*/
.bg-active{
    background-color: #36B37E;
    background-color: #4cd137;
}
.bg-passive{
    background-color: #F2FF00;
    background-color: #FFE100;
}
.bg-hidden{
    background-color: #F2994A;
    background-color: #FF5F00;
    background-color: #FF8900;
}
.bg-terminated{
    background-color: #CBCBCB; 
}


/* Alternative shadows
*/
.shadow-start {
    box-shadow: -1px .125rem .25rem  rgb(0 0 0 / 5%) !important;
}

.border-active {
    border-color: #4cd137 !important;
    border-color: #0bf446 !important;
}

.border-light {
    border-color: var(--bs-light) !important;
}
.p-1-1 {
    padding: .3rem!important;
}


/* Background colors 
*/
.bg-glass-white-1 {
    background: rgba(255, 255, 255, 0.25) !important;
}
.bg-glass-white-2 {
    background: rgba(255, 255, 255, 0.4) !important;
}
.bg-glass-white-3 {
    background: rgba(255, 255, 255, 0.6) !important;
}
.bg-glass-white-4 {
    background: rgba(255, 255, 255, 0.8) !important;
}
.bg-glass-dark-gradient {
  background-image: linear-gradient(0deg,  rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));    
}
.bg-glass-dark-gradient-reverse {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.bg-glass-dark-1 {
    background: rgba(0, 0, 0, 0.25) !important;
}
.bg-glass-dark-2 {
    background: rgba(0, 0, 0, 0.4) !important;
}
.bg-glass-dark-3 {
    background: rgba(0, 0, 0, 0.6) !important;
}
.bg-glass-dark-4 {
    background: rgba(0, 0, 0, 0.9) !important;
}
.bg-blur-1 {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}
.bg-blur-2 {
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
}
.bg-blur-3 {
    backdrop-filter: blur(75px) !important;
    -webkit-backdrop-filter: blur(75px) !important;
}
.border-glass-white{
    border-color: rgba(255,255,255,0.6) !important;
}

/* Backdrop-filter isn't supported in firefox, turn it off

@-moz-document url-prefix() {
    body {
        background-image: linear-gradient(to right,  #fcd5ce , #f4acb7) !important; /* roze */
    }
}
*/
body {
    /*
    background: linear-gradient(315deg, #aecad6 0%, #b8d3fe 74%); /* light blue */
    background-image: linear-gradient(to right,  #fcd5ce , #f4acb7); /* roze */
    background-image: linear-gradient(to right,  white , white);

    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    */
}

.opacity-1 {
    opacity: 0.9;
}
.opacity-2 {
    opacity: 0.7;
}
.opacity-3 {
    opacity: 0.5;
}


/* remove double background on web notifications 
*/
.toast{
    border:none !important;
    background:transparent !important;
    box-shadow: none !important;
}


/* Scroll bar style
*/
:root {
    --scrollbar-bg: rgb(1 2 3 / 40%); /* dark mode */
    --scrollbar-bg: rgb(255 253 253 / 57%); /*light mode */
}
::-webkit-scrollbar {
 width: 6px;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb {
 background: var(--scrollbar-bg);
 border-radius: 10px;
}
/* Hide scrollbar for IE, Edge and Firefox */
.overflow-auto {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */  
}


/* form radio buttons style
*/
section.detailed input[type="radio"] {
  display: none;
}

/* als die uit staat
*/
section.detailed label {
    padding: 0.7rem;
    border-radius: 0.3rem!important;
    border: 1px solid rgba(255, 255, 255, 0) !important;    
    cursor: pointer;
}

/* selected color
*/
section.detailed input[type="radio"]:checked + label {
    background: rgba(116, 223, 109, 0.5);
    border: 1px solid rgba(1, 1, 1, 0.11) !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    cursor: auto;
}

ul.dropdown-menu li a:hover, ul.list-group li a:hover{
  /*
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    color: black;
    */
}
/* Turn off for iPhone only */
@supports (-webkit-touch-callout: none) {
  ul.dropdown-menu li a:hover, ul.list-group li a:hover{
      background: none !important;
      box-shadow: none !important;
  }
}

/* needed icm with navbar top fixed */ 
body {
  padding-top: calc(53px + env(safe-area-inset-top));
}

@media (max-width: 768px) {
  
  /* needed icm with navbar top fixed */
  .main_navbar{
    padding-top: env(safe-area-inset-top) !important;
  }

}

.main_navbar{
  padding-top: env(safe-area-inset-top) !important;

}

.navbar.fixed-bottom, .modal-footer{
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.chat-input-box {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

.mobile-header-chat-session {
  padding-top: calc(0rem + env(safe-area-inset-top));
}

footer {
  padding-bottom: calc(3rem + env(safe-area-inset-bottom));
}

/* modal

.modal-backdrop {
    background-color: transparent !important;
}

.modal-backdrop.show {

    backdrop-filter: blur(100px) !important;
    -webkit-backdrop-filter: blur(100px) !important;        

}
*/


/* make the search input grow on focus
*/
input.input-autogrow[type=text] {
  
  min-width:250px;
  max-width: 500px;
  width:100%;
  

  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  

  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  
}

input.input-autogrow[type=text]:focus {
  width: 100%;
  background-color:white !important;
  position:fixed;
  z-index:999999; 
}
.search-view-results{
    /*
    position: absolute;
    left: 10px;
    top: 50px;
    width: 90vw;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
    border-bottom: 1px solid #eee;
    color: #222;
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    list-style-type: none;
    */
    z-index:9999;
    max-height: calc(100vh - 100px);
    overflow-y: scroll;    
}

/* Fix for iPhone app
*/
.modal.show .modal-header{
  padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}



@media (max-width: 991.98px) {
    .offcanvas-lg {

        top: 0px;
        bottom:0px;

    }
}

.do_pinch_zoom {
  touch-action: pan-y pan-x pinch-zoom;
}


.text-shadow {
    text-shadow: 1px 1px #000000;
}
.text-primary {
  color: #ff006e !important;
}

.mediaclass-body-media-large{
  max-width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-xl) !important;
}

/* white placeholder icm with white text
*/
.text-white::placeholder {
  color: white !important;
  opacity: 1; /* Firefox */
}

.text-white::-ms-input-placeholder { /* Microsoft Edge */
 color: white;
}

/* share button always visible on mobile above footer
*/
@media (max-width: 768px) {
    .btn-share{
        position:absolute;
        bottom: calc(2rem + env(safe-area-inset-bottom));
        transform: translate(-50%,-50%)!important;
        left:50%;
        z-index:999;
    }

}


.shadow-sm {
    box-shadow: 0 0rem .25rem rgba(0,0,0,.075)!important;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2) !important;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.125) !important;
}

/* fix needed icm with using class sticky-top */
.dropdown-menu{
    z-index: 1021;
}

.card{
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.125) !important;
    border-radius: var(--bs-border-radius-xl)!important;
    padding: 1rem;
    border: 0!important;
}

/* For android & desktop */
#enable-web-push-notifications{
 bottom: 0px;
 z-index: 1022;
}
@media (max-width: 768px) {
  #enable-web-push-notifications{
    bottom: 57px;
  }
}

/* fix voor together */
.together-body p {
  margin: 0!important;
}

/* bootstrap 5.3 */
.object-fit-cover {
  object-fit: cover!important;
}

/* Chat table 
*/
.btn-multi-user{
    background-image: url("/lib/images/bg-chat-table.svg");
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -3px 0 0 rgb(0 0 0 / 25%);
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;    
}
.btn-multi-user > ul {
    margin-left:2px;
}

.multi-user-lg {
    background-image: url("/lib/images/chat-details-bg-15.svg");
    width: 350px;
    height: 350px;
}

.badge{
	font-weight: normal !important;
	
}

/* 
* Background body overlay of all modals
*/
.modal-backdrop.show{
	background-color: rgba(0,0,0,.3) !important;
	
}
.modal.show{
	-webkit-backdrop-filter: blur(7px) !important;
	backdrop-filter: blur(7px) !important;
}