.custom-event-content {
    overflow: auto;
    padding: 5px 0%;
    font-size: small;
    width:100%;
}

.fc-event {
    right:unset!important
}

.fc-daygrid-day-events {
    /* margin-left: 10px;
    margin-right: 10px; */
    margin:0;
    width:100%;
    color: white;
    text-wrap: wrap;
    text-align: center;
}

img.img-fluid{
    object-fit: cover;
}

@media (max-width: 600px) {
    .fc-daygrid-event {
      /* Adjust styles for mobile */
        display: block;
        max-height: none;
        overflow: visible;
    }
    /* You can add more styling adjustments for mobile here */
}
.fc-daygrid-event{
    justify-content: center;
    font-size: inherit!important;
}

.fc-event{
    cursor:pointer;
    border:0!important;
    background-color: unset!important;
}

.fc-list-event-time{
    width:20%!important;
}
.fc-list-event-title{
    flex-grow: 1;
}
.fc-list-table .fc-event {
    display: flex; /* Change display to flex for better control over child elements */
    width: 292%; /* Ensure it takes the full width available */
    box-sizing: border-box; /* Make sure padding and borders are included in the total width */
}

  /* Additional styling to ensure content within .fc-event is displayed as you desire */
.fc-list-table .fc-event .fc-event-title {
    flex-grow: 1; /* Allow the title to grow and fill available space */
}

@media only screen and (max-width:800px){
    .fc-daygrid-day-events {
        max-height: 50px;
        text-wrap:nowrap!important;
    }
}


.fc-daygrid-day-frame {
    min-height: 150px !important;
}


table tr,
table td{
    max-width: 700px!important;
    text-wrap: wrap!important;
}

.btn.btn-primary,
.btn.btn-primary:hover{
    background-color: #198754!important;
    border-color:#198754!important;
    color:white;
}
.btn.btn-primary:hover{
    border-color: black!important;
    color:#000;
}

/* color #F9AA68 */



body[data-layout=detached] #layout-wrapper::before {
	background: linear-gradient(to right,#F40000,#F40000) !important;
}

@media (max-width:992px){
    body.sidebar-enable .vertical-menu{
        margin-top:15px;
    }
}

.navbar-header {
    height:85px!important;
}

.bg-login-overlay {
	background: linear-gradient(to right, #FFFCEC,#FFFCEC) !important;
}

body[data-topbar=colored] #page-topbar, body[data-topbar=dark] #page-topbar {
    background-color: black !important;
}

.selection { width:100% }
.select2-selection { height: 40px !important; }

.select2-selection {
    line-height: 0.5 !important;
    padding: 0.175rem 0.5rem;
}

.select2-container--bootstrap-5 {
    line-height: 0.5 !important;
    padding: 0.175rem 0 !important;
}

body.login #layout-wrapper::before { height:0px !important; }
body.login .page-title-box { display:none !important; }

.page-title{
    color:white!important;
}

body[data-layout=detached] .vertical-menu .user-img img {
    border: unset!important;
}


li.mm-active > a, li.mm-active > a > i,
.mm-active .active, .mm-active .active i {
    color: #F40000!important;
    font-weight: bold;
}

.bg-danger {
    background-color: #d73925!important;
}

.btn-danger {
    color: #fff;
    background-color: #d73925;
    border-color: #d73925;
}

.page-item.active .page-link{
    background-color: #F40000!important;
    border-color: #F40000!important;
}

#sidebar-menu ul li a {
    padding: 0.25rem;
    margin: 5px;
}

.menu-title{
    font-weight: bold;
    font-size: 12px;
}

@media (max-width: 991.98px) {
	body[data-topbar=colored] #page-topbar {
		background: linear-gradient(to right,black,black) !important;
	}
}

.dt-buttons{
    width:100%!important;
}

.dt-buttons button{
    background:#F40000!important;
    color:white!important;
    border:1px solid white!important;
}

@media only screen and (max-width:600px){
    .dt-buttons{
        display:none!important;
    }
}


.ptro-scroller{
    overflow: unset!important;
}

.ptro-holder {
    bottom: 32px;
}
.ptro-icon-btn[class] {
    border-radius: 27px;
    background-color: #272a2f;
    box-shadow: inset -1px -1px 8px 1px rgba(0, 0, 0, 0.7);
    position: relative;
    color: #c4c8cb;
}
.ptro-icon-btn[disabled] {
    color: #575757;
}
.ptro-icon-btn:not([disabled]):hover[class] {
    background-color: #233 !important;
    color: #c4c8cb !important;
}
.ptro-color-active-control[class] {
    background-color: #656565;
    box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.7);
}
.ptro-color-active-control[class]::after {
    box-shadow: inset -1px -1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-icon-btn::after {
    content:'';
    width: 100%;
    height: 100%;
    border-radius: 27px;
    position: absolute;
    box-shadow: inset 1px 1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-color-main[class] {
    background-color: #00000000;
}
.ptro-wrapper[class] {
    background-color:  #00000000;
}

span.ptro-info{
    display: none;
}

#painterroContainer-bar{
    z-index: 10000;
}
.mfp-close{
    color:white!important;
}

#painterroContainer-canvas{
    height: 80vh!important;
    width: auto!important;
}

@media only screen and (max-width: 600px) {
    canvas#painterroContainer-canvas{
        height: 55vh!important;
        width: auto!important;
    }
    div#painterroContainer-bar{
        height:84px!important;
    }
    div#painterroContainer-bar > div{
        flex-wrap:wrap;
    }
    .ptro-bar {
        bottom: 5%!important;
    }
}
.ptro-bar > div {
    justify-content: center;
}

.dropzone{
    padding:0!important;
    min-height: 100px!important;
}
.dropzone .dz-message{
    margin : 1.3em 0!important;
}

.delete_photo{
    position:absolute;
    transform:translate(-50%,-50%);
    top:20px;
    right:5px;
}

.select2-container{
    width:unset!important;
    max-width:1682px!important;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */

}

.spanner{
    position:fixed;
    top: 50%;
    left: 0;
    background: transparent;
    width: 100%;
    display:block;
    text-align:center;
    height: 300px;
    color: #FFF;
    transform: translateY(-50%);
    z-index: 1000;
    visibility: hidden;
}


.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}
.loader {
    color: #ffffff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}
@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.show{
    visibility: visible;
}

.spanner, .overlay{
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.spanner.show, .overlay.show {
	opacity: 1
}