/* ------------------------------------------------------------------------------
 *
 *  # Custom CPanel styles
 *
 * ---------------------------------------------------------------------------- */
:root,
[data-color-theme=light]{
  --body-font-size-lg: 1rem;
  --body-font-size-sm: 0.75rem;
  --body-font-size-xs: 0.625rem;
  --body-line-height-computed: calc(1375rem / 1000);
  --body-line-height-lg: 1.375;
  --body-line-height-sm: 1.8334;
  --body-line-height-xs: 2.2;
  --spacer-1: 0.3125rem;
  --spacer-2: 0.625rem;
  --spacer: 1.25rem;
  --spacer-4: 1.875rem;
  --spacer-5: 3.75rem;
  --icon-font-family: Phosphor;
  --icon-font-size: 1.25rem;
  --icon-font-size-lg: 1.5rem;
  --icon-font-size-sm: 1rem;
  --transition-base-timer: 0.15s;
  --transition-collapse-timer: 0.3s;
  --font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --body-font-family: var(--font-sans-serif);
  --body-font-size: 0.875rem;
  --body-font-weight: 400;
  --body-line-height: 1.5715;
  --border-width: 1px;
  --border-style: solid;
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;
  --highlight-bg: rgba(0, 0, 0, 0.15);
}


/* General */
#alert-container {
    display: none;
    left: 10%;
    position: fixed;
    top: 60px;
    width: 80%;
    z-index: 2000;
}
#alert-container .alert {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.sortable-placeholder + .panel.mb-10{
	margin-top:10px;
}

/* sidebar */
.sidebar-main .sidebar-logo a{
	color:var(--body-color);
}
.nav-sidebar{
	--nav-link-active-color:var(--body-color);
}

/* navbar */

/* cards */
[data-card-action=collapse] svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  transition: -webkit-transform ease-in-out var(--transition-collapse-timer);
  transition: transform ease-in-out var(--transition-collapse-timer);
  transition: transform ease-in-out var(--transition-collapse-timer), -webkit-transform ease-in-out var(--transition-collapse-timer);
}
@media (prefers-reduced-motion: reduce) {
  [data-card-action=collapse] svg {
    transition: none;
  }
}
.card-collapsed [data-card-action=collapse] svg {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/* light color whitout opacity */
.alpha-indigo{
	background-color:var(--alpha-indigo) !important;
}
.alpha-purple{
	background-color:var(--alpha-purple) !important;
}
.alpha-pink{
	background-color:var(--alpha-pink) !important;
}
.alpha-teal{
	background-color:var(--alpha-teal) !important;
}
.alpha-yellow{
	background-color:var(--alpha-yellow) !important;
}
.alpha-primary{
	background-color:var(--alpha-primary) !important;
}
.alpha-secondary{
	background-color:var(--alpha-secondary) !important;
}
.alpha-success{
	background-color:var(--alpha-success) !important;
}
.alpha-info{
	background-color:var(--alpha-info) !important;
}
.alpha-warning{
	background-color:var(--alpha-warning) !important;
}
.alpha-danger{
	background-color:var(--alpha-danger) !important;
}
.alpha-black{
	background-color:var(--alpha-black) !important;
}
.alpha-white{
	background-color:var(--alpha-white) !important;
}

/* grid system */
.grid-cols-2{
	grid-template-columns:repeat(2,1fr);
}
.grid-cols-3{
	grid-template-columns:repeat(3,1fr);
}
.grid-cols-4{
	grid-template-columns:repeat(4,1fr);
}
.grid-cols-5{
	grid-template-columns:repeat(5,1fr);
}
.grid-cols-6{
	grid-template-columns:repeat(6,1fr);
}
.grid-cols-8{
	grid-template-columns:repeat(8,1fr);
}
.grid-cols-10{
	grid-template-columns:repeat(10,1fr);
}
.grid-cols-12{
	grid-template-columns:repeat(12,1fr);
}
@media (min-width: 576px) {
	.grid-sm-cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.grid-sm-cols-3{
		grid-template-columns:repeat(3,1fr);
	}
	.grid-sm-cols-4{
		grid-template-columns:repeat(4,1fr);
	}
	.grid-sm-cols-5{
		grid-template-columns:repeat(5,1fr);
	}
	.grid-sm-cols-6{
		grid-template-columns:repeat(6,1fr);
	}
	.grid-sm-cols-8{
		grid-template-columns:repeat(8,1fr);
	}
	.grid-sm-cols-10{
		grid-template-columns:repeat(10,1fr);
	}
	.grid-sm-cols-12{
		grid-template-columns:repeat(12,1fr);
	}
}
@media (min-width: 768px) {
	.grid-md-cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.grid-md-cols-3{
		grid-template-columns:repeat(3,1fr);
	}
	.grid-md-cols-4{
		grid-template-columns:repeat(4,1fr);
	}
	.grid-md-cols-5{
		grid-template-columns:repeat(5,1fr);
	}
	.grid-md-cols-6{
		grid-template-columns:repeat(6,1fr);
	}
	.grid-md-cols-8{
		grid-template-columns:repeat(8,1fr);
	}
	.grid-md-cols-10{
		grid-template-columns:repeat(10,1fr);
	}
	.grid-md-cols-12{
		grid-template-columns:repeat(12,1fr);
	}
}
@media (min-width: 992px) {
	.grid-lg-cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.grid-lg-cols-3{
		grid-template-columns:repeat(3,1fr);
	}
	.grid-lg-cols-4{
		grid-template-columns:repeat(4,1fr);
	}
	.grid-lg-cols-5{
		grid-template-columns:repeat(5,1fr);
	}
	.grid-lg-cols-6{
		grid-template-columns:repeat(6,1fr);
	}
	.grid-lg-cols-8{
		grid-template-columns:repeat(8,1fr);
	}
	.grid-lg-cols-10{
		grid-template-columns:repeat(10,1fr);
	}
	.grid-lg-cols-12{
		grid-template-columns:repeat(12,1fr);
	}
}
@media (min-width: 1200px) {
	.grid-xl-cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.grid-xl-cols-3{
		grid-template-columns:repeat(3,1fr);
	}
	.grid-xl-cols-4{
		grid-template-columns:repeat(4,1fr);
	}
	.grid-xl-cols-5{
		grid-template-columns:repeat(5,1fr);
	}
	.grid-xl-cols-6{
		grid-template-columns:repeat(6,1fr);
	}
	.grid-xl-cols-8{
		grid-template-columns:repeat(8,1fr);
	}
	.grid-xl-cols-10{
		grid-template-columns:repeat(10,1fr);
	}
	.grid-xl-cols-12{
		grid-template-columns:repeat(12,1fr);
	}
}
@media (min-width: 1400px) {
	.grid-xxl-cols-2{
		grid-template-columns:repeat(2,1fr);
	}
	.grid-xxl-cols-3{
		grid-template-columns:repeat(3,1fr);
	}
	.grid-xxl-cols-4{
		grid-template-columns:repeat(4,1fr);
	}
	.grid-xxl-cols-5{
		grid-template-columns:repeat(5,1fr);
	}
	.grid-xxl-cols-6{
		grid-template-columns:repeat(6,1fr);
	}
	.grid-xxl-cols-8{
		grid-template-columns:repeat(8,1fr);
	}
	.grid-xxl-cols-10{
		grid-template-columns:repeat(10,1fr);
	}
	.grid-xxl-cols-12{
		grid-template-columns:repeat(12,1fr);
	}
}

/* tables */
.table-sm{
	--table-cell-padding-x: 1rem;
}
.table-xs{
	--table-cell-padding-x: 0.625rem;
}
.table-xxs{
	--table-cell-padding-y: 0.375rem;
	--table-cell-padding-x: 0.5rem;
}
/* Datatable */
.datatable-header .dataTables_filter{
	margin-left:0;
}
.datatable-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
	column-gap:0.625rem;
}
.datatable-toolbar .dataTables_length{
	margin-left:auto;
}
.dataTables_wrapper .table-sm{
	--dt-spacer-x:1rem;
	--dt-spacer-y:1rem;
}
.dataTables_wrapper .table-xs{
	--dt-spacer-x:0.625rem;
	--dt-spacer-y:0.625rem;
}
.dataTables_wrapper .table-xxs{
	--dt-spacer-x:0.5rem;
	--dt-spacer-y:0.5rem;
}
.dataTable thead .sorting:before,
.dataTable thead .sorting:after,
.dataTable thead .sorting_asc_disabled:before,
.dataTable thead .sorting_desc_disabled:after{
	right:calc(var(--dt-spacer-y) - 5px);
}
.dataTable tr > .dtfc-fixed-left{
	position:sticky;
	left:0;
	box-shadow:1px 0 0 var(--border-color);
}
.dataTable tr > .dtfc-fixed-right{
	position:sticky;
	right:0;
	box-shadow:-1px 0 0 var(--border-color);
}

/* users thumbnails */
.user-thumbnail{
	width:3.75rem;
	height:3.75rem;
	font-size:1.5rem;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	background-color:#d6d1ff;
	color:#4e39fe;
	border-radius:50%;
	overflow:hidden;
	cursor:pointer;
}
.user-thumbnail span.img-alt{
	display:none;
}
.user-thumbnail img{
	width:100%;
	height:100%;
}
.user-thumbnail img[src=""]{
	display:none;
}
.user-thumbnail img[src=""]+span.img-alt{
	display:inline-block;
}
.user-thumbnail[data-color="1"]{
	background-color:#caf4c3;
	color:#4b9e3c;
}
.user-thumbnail[data-color="2"]{
	background-color:#f6e6b8;
	color:#a48834;
}
.user-thumbnail[data-color="3"]{
	background-color:#efb0b0;
	color:#993333;
}
.user-thumbnail[data-color="4"]{
	background-color:#f2cef1;
	color:#a442a3;
}
.header-thumbnail,
.table-thumbnail{
	width:2rem;
	height:2rem;
	font-size:1rem;
}

/* gallery grid */
.gallery-grid {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--spacer-2);
	row-gap: var(--spacer-2);
}
.gallery-element {
	display: flex;
	width: 150px;
	height: 150px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.gallery-element > img {
	max-width: 100%;
	max-height: 100%;
}

/* login page */
.login-cover{
	background:url(../img/backgrounds/panel_bg.png) center center;
}

/* versions */
.minor-version{
	opacity:0.6;
}

/* Custom classes */
.hide{
	display:none !important;
}
.hidden{
	display:none;
}

.bounce-notification{
	-webkit-animation-duration:10s;
	animation-duration:10s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-name:notificationBounce;
	animation-name:notificationBounce;
}
@keyframes notificationBounce{
	from{
		-webkit-transform:scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1)
	}
	3%{
		-webkit-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1)
	}
	4%{
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1)
	}
	5%{
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1)
	}
	6.5%{
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1)
	}
	7.5%{
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1)
	}
	10%{
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	100%{
		-webkit-transform:scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1)
	}
}