:root {
    --meet-primary-color: #CB0C11;
}

table {
  margin-bottom: 1em;
}
.btn-check:focus+.btn,
.btn:focus {
  outline:0;
  box-shadow:none !important;
}

h3, h4, h5 {
  margin-top: .5rem !important;
}

h5.blog{
  font-style: italic;
}

.meet-bg-primary {
    background-color: var(--meet-primary-color) !important;
}

.meet-text-primary {
    color: var(--meet-primary-color) !important;
}

.meet-text-primary-lighten {
    color: #ff4545 !important;
}

#messageDiv {
    margin: 1%;
    width: 98%;
    text-align:center;
}

._graylink {
  color:#6c757d !important;
  text-decoration:none !important;
  text-align:center;
  font-weight: bold;
}

._break {
  clear:both;
}

._alert {
    padding: .5rem;
}

._bigger {
  font-size:1.25em !important;
}

._smaller {
  font-size: .75em !important;
}

._header_color {
    color:#94236e;
}

h5.blog {
  color: #0066FF;
  margin-left: 1em !important;
  font-size:1em;
}

._nota{
    margin:0;
    font-size:.75rem;
    font-family:sans-serif;
}

._bordered{
  border: 1px solid #c9d2d3;
}
  /* Tooltip container */
  a._tooltip {
    position: relative;
    display: inline !important;
    text-decoration:none;
    /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  ._tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    /*background-color: black;*/
    background-color:#b84744;
    color: #fff;
    text-align: center;
    line-height:1.4em;
    padding: 5px 10px;
    margin-left:15px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
  }
  
  a._tooltip:hover {
    color:#fff !important;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  ._tooltip:hover .tooltiptext {
    visibility: visible;
  }

  a.ok {text-decoration:none;cursor:pointer;}
  .ok, .tip{
    display:block;
    float:left;
    margin:0;
    margin-left: 3px;
    width:2em;
    text-align:center;
    line-height:1.6em;
    background-color:#b84744;
    font-size:.8em;
    color:#fff;
  }

  .tip {
    float:none !important;
  }

#user-avatar-upmenu {
    border-radius: 999px;
}

.first-picture-container #img-avatar {
    cursor: pointer;
}

div.online-indicator, div.was-online-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    background-color: #0fcc45;
    border-radius: 50%;
    position: relative;
  }

div.was-online-indicator, ._bg-warning {
    background-color:coral;
    /*background-color:#ffc107;*/
}

span.blink {
    display: block;
    width: 7px;
    height: 7px;  
    background-color: #0fcc45;
    opacity: 0.7;
    border-radius: 50%;
    animation: blink 1s linear infinite !important;
  }

.btn-success{
  color:#FFF !important;
}

._verified-badge {
  margin-right: 2px !important;
  margin-left: 0 !important;
}

._verified-badge img {
  width:18px;
  height:18px;
}

  @keyframes blink {
    100% { transform: scale(2, 2); 
            opacity: 0;
          }
  }

@media all and (min-width: 992px){
    ._nota{
        margin:.75em;
    }
}
@font-face {
    font-family: BalooPaaji2;
    src: url("/static/fonts/Baloo_Paaji_2/BalooPaaji2-VariableFont_wght.ttf?6de5f49cfffd");
}
@font-face {
    font-family: ProximaNova;
    src: url("/static/fonts/ProximaNova/proxima-nova-regular.ttf?6de5f49cfffd");
}

* {
    -font-family: BalooPaaji2, cursive, sans-serif !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.zoomable-image {
    max-width: 100% !important; 
    max-height: 100% !important; 
    object-fit: contain !important;
    transition: transform 0.3s ease;
}

.image-container{
    overflow: hidden;
    cursor: grab;
}

.image-container:active {
    cursor: grabbing; /* Change cursor to "grabbing" when active */
}

._bglabel{
    opacity:.76;
    background-color:#198754;
    color:#fff;
    line-height:2em;
}

._turnbtnr,  ._turnbtng {
    padding: .5em;
    border-radius: 5px;
    margin: .5em;
    padding: 0 .5em .3em !important;
    display:block;
    color: #fff !important;
    text-align:center;
    text-decoration:none;
}

._turnbtnr{
    background:#BC0C11;
    width:44%;
    float:left;
}

._turnbtng{
    background:darkgreen !important;
}

._content{
    padding:1em;
}

._mobile {
    display: block !important;
}
._desktop{
    display: none !important;
}

._logocontainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* This is necessary, otherwise the <a surronding the img will not adapt to the size of the img*/
.logo-container{
    display:flex;
}

.leftPanel, .rightPanel {
    text-align: center !important;
}

legend._header {
    font-size:1.9rem;
}

h4._in_profile {
    font-size:1.3rem;
}

h5._in_profile {
    font-size:1.10rem;
}

.logo{
    width:110%;
    margin:0;padding:0;
    /*
    margin:5px 0;
    padding:5px 0;
    */
}

p {
    font-family: ProximaNova, sans-serif;
    margin-top: 1em !important;
}

img {
    overflow-wrap: break-word;
}

#default-image {
    height: 200px;
    margin-right: -32px;
}

#div-default-image {
    display: flex;
    justify-content: center;
}

#div-default-image button {
    position: relative;
    top: 5px;
    right: 6px;
    visibility: hidden;
    height: 32px;
    width: 32px;
    background-color: rgba(15, 15, 15, 0.6);
}

#default-image:hover ~ button, #default-image ~ button:hover {
    visibility: visible;
}

.loading-crop-image {
    position: relative !important;
    top: -250px;
}
      
.bg-primary {
    /* it was 277105 */
    background-color: #BC0C11 !important;
    opacity:.9;
  }

.bg-primary2 {
    background-color: #024AB5;
    opacity:.9;
}

body{
    -background:#f9fafb !important;
}

a { text-decoration: none; }

._header_color {
    color:#94236e;
}

._pink, ._header_1{
    color: #d4319b !important;
}

._header_blue, ._header_0, ._uname {
    color: #024ab5 !important;
}

._personal_ad_square {
    width: 100%;
    max-width: 450px;
    border: 1px dotted #aaa;
    border-radius: 15px;
    padding: 15px;
}

._text-muted-underline{
    color: #6c757d !important;
    text-decoration: underline;
    -background:#f9fafb;
    margin: 15px 0;
}

._text-muted-underline-0 {
    color:#024ab5 !important;
    text-decoration: underline;
    -background:#f9fafb;
    margin: 15px 0;
}

._text-muted-underline-1 {
    color: #F15C6D !important;
    text-decoration: underline;
    -background:#f9fafb;
    margin: 15px 0;
}

._container{
    max-width:1300px;
    margin: 0 auto !important;
}

fieldset {
    padding:5px;
    line-height: 1.8em;
    width:fit-content;
    margin:0 auto;
    min-width:100%;
}

.middlediv {
    border: 0;
    padding:0 5px 0px 25px !important;
    margin: 0;
}

.form-label{
    opacity:.65;
    transform: scale(0.85) translateY(0.5rem) translateX(0.15rem);
}

._oval { 
    border-radius: 50% !important;
}


/* navigation icon */
._nicon {
    font-size:16px;
}

.btn-light{
    background-color:#fff;
}

._opacity-0 {
    opacity: 0 !important;
}

._opacity-50 {
    opacity: 0.5 !important;
}

._opacity-100 {
    opacity: 1 !important;
}

/* Session security modal*/
.session_security_overlay {
    z-index:1075 !important;
}

.session_security_modal {
    /*position: static !important;*/
    /*left: 25%;*/
    /*width: 50%;*/
    /*padding: 16px;*/
    /*background: #fff;*/
    /*color: #333;*/
    top: 50% !important;
    transform: translateY(-50%);
    z-index:1080 !important;
}

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* These are notification styles, no way to render them, I was forced no copy them here from myproj/static/notifys/vue-ui/dist/css/app.css */
.dropdown-toggle[data-v-d0dd1d3c]:after{display:none}.specific-notify-bell[data-v-d0dd1d3c]{position:absolute;top:1em;left:100%}._icon[data-v-d0dd1d3c]{font-size:24px;margin-right:.1em;margin-top:.2em}.notifications-list{width:250px;max-width:85vw;min-width:180px;max-height:80vh;overflow-y:auto;border-radius:5px;margin-top:2px!important;box-shadow:5px 5px 10px rgba(0,0,0,.4)}.notifications-list li{margin-left:0;margin-right:0;padding:0 1rem;cursor:pointer;border-top:1px dashed #999}.notifications-list .notifications-list-link{display:inline-block;width:100%;color:var(--bs-primary)}.notifications-list .notifications-list-link:hover{color:#fff}._read{position:relative}._bold,._read{padding-left:20px}._bold:before{content:"";display:inline-block;vertical-align:middle;margin-right:10px;width:10px;height:10px;background-color:#024ab5;border-radius:50%}
/* End directive from notifications. */
@media screen and (max-width: 480px) {

    #div-default-image button {
        visibility: visible;
    }
}

@media all and (min-width: 576px){
    ._turnbtnr,  ._turnbtng {
        margin: 0 1em;
        padding: 0;
        display: block;
        background-color: #fff;
        width: auto;
        margin-right:10px;
    }

    fieldset {
        min-width: 560px;
        max-width: 560px;
        margin:0 auto;
        padding:0 25px 0;
        line-height:normal;
    }

    .middlediv {
        margin:0 auto;
        min-width: 560px;
        max-width: 560px;
    }

    ._personal_ad_square {
        max-width: 640px;
    }

    ._personal_ad {
        font-size: 1.1em;
    }
}
@media screen and  (min-width: 768px) {
    .logo{
        width: auto;
        margin:2px 0 0 5px;
    }
    fieldset {
        margin: 0 auto;
    }

    .modal-dialog{
        max-width:800px !important;
    }
    
    .mobileMenu{
        display:none;
    }
}


@media screen and  (min-width: 960px) {
    ._logocontainer{
        display:block;
    }
    .col2{
        display: block;
    }

    .fancy-container{
        display: inline-block;
        padding: 0 10px;
        text-align: center;
    }    
}

/* Here starts the desktop version */
@media screen and  (min-width: 992px) {
    ._mobile {
        display: none !important;
    }
    ._desktop{
        display: block !important;
        width: auto;
        margin-right:.5em;
    }

    .btn-light{
        background-color:#f8f9fa;
    }

    .modal-dialog{
        max-width:1000px !important;
    }

    ._text-muted-underline{
        margin: 0;
    }

    fieldset {
        margin: 0;
    }

    .middlediv{
        margin: 0 !important;
    }

    .leftPanel {
        text-align:left !important;
    }

    .leftPanel, .rightPanel {
        text-align:left !important;
    }
}

@media screen and  (min-width: 1200px) {
    .modal-dialog{
        max-width:1200px !important;
    }
}

@media screen and  (min-width: 1400px) {
    /* not implemented yet */
}

._toprow{
    --bs-gutter-x: 0;
    width:100%;
    margin-top:2px;
}

._cb0c11 {
    color: #cb0c11 !important;
}
._gray{
    /*color:#636466 !important;*/
    color:#5F5F5F;
}

._white {
    color: #fff !important;
}

._forcegray { color: #5f5f5f !important;}


.btnLnk { color:#636466 !important; opacity:.9}
.btnLnkMain { color:#cb0c11 !important; opacity:.9;margin-top:5px;font-size:1rem !important;}
.btnLnkGreen { color:#024ab5 !important;}

.desktopContainer{
    display:none;
}


.upmenu {
    /*width: 100%;*/
    height: auto;
    background:#fff;
    -padding: .5em;
}

._back, ._legend{
    display:none !important;
}

._menu-container{
    float:right;
    padding: 0 .75rem;
    text-align: center;
}

.my-text {
    display: block;
    font-size:smaller;
}

.my-text-inline {
    display: inline;
    font-size:smaller;
    vertical-align:middle;
}

.col2{
    display:none;
}

.col3{
    text-align:right;
    padding-right:1rem;
    padding-right:2rem;
}

.mobileMenu{
    display:block;
    width:100%;
    padding: .25rem;
}

.fancy-container-mobile{
    display: inline-block;
    padding: 0 10px;
    text-align: center;
}

._colored {
    color: #5b5b5b;
}

#dropdownMenuLink {
    text-decoration:none;
}

ul.show > li {
    margin: 5px 1px;
    padding: .3em;
}

ul.show > li a {
    color:#333;
}

ul.show > li:hover {
    background: #0e94d4;
    opacity:0.6;
    color:#fff;
}

.col2{
    display: none;
}

.account-container{
    display: block;
    float:right;
    padding: 0;
    margin-right:5px;
    text-align: center;
}

.loggedout-container{
	display:block;
	float: right;
	padding:0;
	margin: 0 10px 0 0;
	text-align:center;
    width:auto;
}

.my-text {
    display: block;
    font-size:smaller;
}

.my-text-inline {
    display: inline;
    font-size:smaller;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 0 auto;
}

.account-container {margin: 0 5px 0 0;}
.lang-container {margin: 5px 0;}

/* navigation icon */
._nicon {
    font-size:16px;
}

._umenu {
    display: block !important;
    padding: .3em;
}

._umenu:hover {
    background:#e9ecef;
}


@media all and (min-width: 576px){
    
    ._nicon {
        font-size:24px;
    }

    .lang-container{
        
        display: block !important;
    }
}

@media screen and  (min-width: 768px) {

    fieldset {
        margin: 0 auto;
    }

    ._legend{
        display:inline-block !important;
    }

    .mobileContainer {
        display: none;
    }
    
    /* overriding  default styles*/
    .nav-link {
        padding:0 !important;
        margin: 0 .5em;
    }

}

/* Here starts the desktop version */
@media screen and  (min-width: 960px) {
    .upmenu {
        height: 72px;
    }
    .col2{
        display: block;
    }

    .mobileMenu{
        display:none;
    }

    .desktopContainer{
        display:flex;
        float:left;
    }
    
    .desktopContainer:after{content: "";clear: both;display: block;}

    .fancy-container{
        display: inline-block;
        padding: 0 10px;
        text-align: center;
    }

    ._back{
        display:block;
    }
}

@media screen and  (min-width: 1200px) {

}
.dropdown-menu li{
  display:block;
  line-height:2rem;
}

._nicon{
  vertical-align:middle;
}
a.dropdown-item {
    text-decoration: none !important;
    color: #333;
}

  .arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    margin: 0 auto;
}


    ol, ul {
        padding-left: 0;
    }

    .hover_collapse, .hover_collapse .sidebar{
        display:none;
    }

    .wrapper {
        float:left;
        /* put it back when showing stats */
        -background:#fff;

    }

    ._container{
        margin: 0;
    }

@media screen and  (min-width: 960px) {
    /* Now I have determined what the sidebar will look like for a responsive device */
    .hover_collapse{
        display:block;
    }
    .hover_collapse .sidebar{
        width: 70px;
        display:block;
    }
    .hover_collapse .sidebar ul li a .text{
        display:none;
    }
    .sidemenu{
        width: 220px;
    }
    /* remove the position fixed and restore float:left when you want to add stats elements below this bar. */
    .sidebar{
        -float:left;
        position:fixed;
        -height: 100%;
        /*
        background: #cb0c11;
        /**/
        
        background: #024ab5;
        /**/
        opacity:0.6;
    }

    .sidebar ul li a{
        display: block;
        padding: 10px 25px;
        text-decoration:none;
        color: #0e94d4;
    }

    .sidebar ul li a .icon{
        font-size: 18px;
        color: white;
        vertical-align: middle;

    }

    .sidebar ul li a .text{
        margin-left: 19px;
        color: #fff;
        font-size: 1em;
    }

    .sidebar ul li a:hover{
        /*background: #0e94d4;*/
        background: #e50000;
        color: #fff;
    }
/*
    .click_collapse .sidebar{

    }
*/
    .leftmenu{
        width:150px;
        clear:both;
        /* remove this when adding stats */
        background: #f5f5f5 !important;
    }
}