@font-face {
    font-family: BalooPaaji2;
    src: url("../fonts/Baloo_Paaji_2/BalooPaaji2-VariableFont_wght.ttf");
}
@font-face {
    font-family: ProximaNova;
    src: url("../fonts/ProximaNova/proxima-nova-regular.ttf");
}

* {
    -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;
}

._footerbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1.5rem 0;
}

._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;
    }

    ._footerbtn, ._turnbtnr {
        color: #6c757d !important;
        padding: 0 !important;
        border-radius: 0;
        text-decoration: underline;
        font-weight: normal;
        font-size: 0.9rem;
    }

    ._footerbtn ._turnbtnr:hover {
        color: #BC0C11 !important; /* Turns red on mouse hover */
        text-decoration: underline;
    }

    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 */
}