@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

/* CSS Document */

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

body,html
{
    font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-optical-sizing: auto;
	font-size: 13px;
}

.fw-normal
{
	font-weight: 500!important;
}

a
{
	text-decoration: none;
}

.col-form-label
{
	font-weight: 600;
}

.form-control, .form-control:focus
{
	font-weight: 600;
	font-size: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
}

.save-btn
{
	bottom: 12px;
	right: 12px;
}

.pb-save
{
	padding-bottom: 64px!important;
}

.dateclock
{
	font-weight: 600;
}

.font-mono
{
  font-family: "Google Sans Code", monospace!important;
}

#navbar, #sidebar
{
	z-index: 2222;
}

#navbar
{
  max-width: 100vw;
}

.modal-backdrop
{
	z-index: 3332!important;	
}

.modal
{
	z-index: 3333!important;
}

.tooltip 
{
	z-index: 3334!important;
}

.modal-title
{
	font-size: 14px!important;
	font-weight: 600!important;
}

.alert
{
	font-size: 12px;
	text-align: center;
}

.alert .fa-fw
{
	margin-top: auto!important;
	margin-bottom: auto!important;
}

#sidebar
{
	position: absolute;
	width: 230px;
	border-right: 1px solid;
	height: calc(100vh - 60px);
	margin-top: 69px;
}

#sidebar .nav-link
{
	margin-bottom: 1px;
}

#sidebar .nav-link .badge
{
	position: relative;
	float: right;
	top: 1px;
}

#sidebar .nav-link .fa-fw
{
	opacity: 0.75;
	margin-right: 4px;
}

#sidebar .nav-link.active .fa
{
	opacity: 1;
}

#sidebar .nav-link.active
{
	border-width: 1px;
	border-style: solid;
}

.menu-logo div
{
	background-size: contain;
	background-position: center;
	height: 98px;
	background-repeat: no-repeat;
}

.btn
{
	font-weight: 500;
}

.btn-secondary
{
	font-weight: 600;
}

.content-container
{
	padding: 24px;
	padding-top: 84px;
	padding-left: 254px;
	padding-right: 24px;
}

.nav-item.active .nav-link, .nav-link.active
{
	font-weight: 600;
}

.nav-link, .nav-title
{
	border-radius: 8px;
	padding: 8px;
}

.nav-card .nav-item
{
	margin-bottom: 1px;
}

.nav-card .fa-fw
{
	margin-right: 4px;
}

.nav-title
{
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
}

.nav-btns
{
	padding: 2px;
	border-radius: 8px;
}

.nav-btns button, .nav-btns a
{
	padding-left: 18px!important;
	padding-right: 18px!important;
	padding-top: 4px!important;
	padding-bottom: 4px!important;
	font-size: 12px;
}

.user-navbar-avatar img
{
	height: 20px;
	width: 20px;
}

.nav-btns .btn:hover, .nav-btns .btn
{
	border-top-width: 0px;
	border-bottom-width: 0px;
}


input:focus, .form-check-input:focus, .page-link:focus
{
	box-shadow: 0 0 0 0 rgba(0,0,0,0.05)!important;
}

.navbar-searchbar input
{
	width: 320px!important;
}

.navbar-searchbar input, .navbar-searchbar input:focus
{
	border-radius: 24px 0px 0px 24px;
	padding-left: 24px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.input-group-append input.form-control
{
	border-right-width: 0px!important;
}

.input-group-prepend input.form-control
{
	border-left-width: 0px!important;
}

.navbar-searchbar .input-group-text
{
	border-radius: 0px 24px 24px 0px;
}

.table
{
	text-align: center;
}

.table th
{
	text-transform: uppercase;
	font-size: 12px;
}

.table-fixed
{
	table-layout: fixed!important;
}

.vehicle-reg
{
	background: #FFDD00;
	color: #000000!important;
	border: 1px solid #000;
	font-weight: bold;
	text-transform: uppercase;
	padding: 3px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 2px;
}

table {
    border: 1px solid #000;
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

table.table tr td
{
	padding-top: 12px;
	padding-bottom: 12px;
}

.dropdown-menu
{
	padding: 0px;
}

.dropdown-menu
{
	min-width: 222px!important;
}

.dropdown-item
{
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 14px;
	padding-right: 14px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
}

.dropdown-item .fa-fw
{
	margin-top: 3px;
	opacity: 0.8;
}

.page-link
{
	border-radius: 8px!important;
	margin-right: 4px;
	min-width: 32px!important;
}

.page-item.active .page-link
{
	font-weight: 600;
}

.card, .list-group
{
	border-radius: 8px;
}

.icon-background
{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;}

.icon-background-20px
{
	width: 40px!important;
	height: 40px!important;
}

.icon-background.icon-background-sm
{
	height: 28px;
	width: 28px;
}

.table-minimal
{
	border-radius: 0px!important;
	border: 0px!important;
}

.table-minimal td
{
	padding-top: 7px!important;
	padding-bottom: 4px!important;
}

.table-minimal.btn-end-padding tr td:last-of-type
{
	padding-top: 4px!important;
	padding-bottom: 4px!important;
}

.form-floating label
{
	z-index: 500;
}

.select2-container .select2-selection--single
{
	height: 30px!important;
}

.select2-selection__rendered, .select2-results__option
{
	font-size: 12px!important;
}

/* ===== Modern Thin Scrollbar ===== */

/* Chromium + Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.4);
  border-radius: 999px;
  border: 2px solid transparent; /* creates padding effect */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 60, 60, 0.85);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 120, 0.25) transparent;
}

.invisible-scrollbar {
  /* keep scrolling behavior */
  overflow-y: scroll!important;
  overflow-x: hidden!important;

  /* Firefox */
  scrollbar-width: none;

  /* IE / old Edge */
  -ms-overflow-style: none;
}

/* Chrome / Safari / Edge (Chromium) */
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.movement-timeline-card
{
	border-radius: 48px;
	padding: 1px;
}

.movement-timeline-card .card-body
{
	border-radius: 48px;
	padding-top: 12px!important;
	padding-bottom: 12px!important;
}

.movement-timeline-card.bg-success .card-body
{
	border-radius: 48px;
	border: 1px solid #f8f8f8;
}

input[readonly]
{
	cursor: default!important;
}

.bg-model
{
	color: #f8f8f8!important;
	background-color: #54b38e!important;
}

.text-model
{
	color: #54b38e!important;
}

.text-pocpod
{
	color: #1880D3!important;
}

.badge
{
	white-space: normal!important;
}

.table td
{
	vertical-align: middle!important;
}

.navbar-brand
{
	width: 230px;
}

@media (max-width: 991px) 
{
	
	.navbar-brand
	{
		width: auto;
	}
	
	#sidebar
	{
		display: none!important;
	}
	
	body.sidebar-open #sidebar
	{
		display: flex!important;
	}
	
	.content-container
	{
		padding: 24px;
		padding-top: 84px;
	}
	
	.navbar-searchbar input
	{
		width: 100px!important;	
	}
	
	#navbar_user_ul
	{
		float: right;
	}
	
}

.strike-out {
  position: relative;
}

.strike-out:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

/* ----------------------------------------------

 * Generated by Animista on 2023-11-9 15:47:32

 * Licensed under FreeBSD License.

 * See http://animista.net/license for more info. 

 * w: http://animista.net, t: @cssanimista

 * ---------------------------------------------- */



/**

 * ----------------------------------------

 * animation bounce-in-top

 * ----------------------------------------

 */

@-webkit-keyframes bounce-in-top {

  0% {

    -webkit-transform: translateY(-500px);

            transform: translateY(-500px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(-65px);

            transform: translateY(-65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(-28px);

            transform: translateY(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(-8px);

            transform: translateY(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}

@keyframes bounce-in-top {

  0% {

    -webkit-transform: translateY(-500px);

            transform: translateY(-500px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

    opacity: 0;

  }

  38% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

    opacity: 1;

  }

  55% {

    -webkit-transform: translateY(-65px);

            transform: translateY(-65px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  72% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  81% {

    -webkit-transform: translateY(-28px);

            transform: translateY(-28px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  90% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

  95% {

    -webkit-transform: translateY(-8px);

            transform: translateY(-8px);

    -webkit-animation-timing-function: ease-in;

            animation-timing-function: ease-in;

  }

  100% {

    -webkit-transform: translateY(0);

            transform: translateY(0);

    -webkit-animation-timing-function: ease-out;

            animation-timing-function: ease-out;

  }

}

/**

 * ----------------------------------------

 * animation roll-in-blurred-left

 * ----------------------------------------

 */

@-webkit-keyframes roll-in-blurred-left {

  0% {

    -webkit-transform: translateX(-1000px) rotate(-720deg);

            transform: translateX(-1000px) rotate(-720deg);

    -webkit-filter: blur(50px);

            filter: blur(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) rotate(0deg);

            transform: translateX(0) rotate(0deg);

    -webkit-filter: blur(0);

            filter: blur(0);

    opacity: 1;

  }

}



@keyframes roll-in-blurred-left {

  0% {

    -webkit-transform: translateX(-1000px) rotate(-720deg);

            transform: translateX(-1000px) rotate(-720deg);

    -webkit-filter: blur(50px);

            filter: blur(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateX(0) rotate(0deg);

            transform: translateX(0) rotate(0deg);

    -webkit-filter: blur(0);

            filter: blur(0);

    opacity: 1;

  }

}



.bounce-in-top {

	-webkit-animation: bounce-in-top 1.2s both;

	        animation: bounce-in-top 1.2s both;

}

.roll-in-blurred-left {

	-webkit-animation: roll-in-blurred-left 1.15s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;

	        animation: roll-in-blurred-left 1.15s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;

}

#toaster
{
    position: fixed;
    top: 32px;              /* distance from top */
    left: 50%;              /* move to horizontal center */
    transform: translateX(-50%); /* true horizontal centering */
    display: flex;
    flex-direction: column;
    align-items: center;    /* center individual toasts */
    gap: 3px;            /* spacing between toasts */
	z-index: 4444;
}

.toast
{
	min-width: 50vh;
	max-width: 80vh;
}

.nav-pills-subtle
{
	text-transform: uppercase;
	font-weight: 600!important;
}

.nav-pills-subtle .nav-item
{
	margin-left: 2px!important;
	margin-right: 2px!important;
}

.nav-pills-subtle .nav-link.active
{
	font-weight: 700!important;
}

.nav-pills-subtle .nav-link
{
	border-radius: 16px!important;
}

.chat-message-other
{
	width: 50%;
	max-width: 50%;
	margin-right: auto;
}

.chat-message-me
{
	width: 50%;
	max-width: 50%;
	margin-left: auto;
}

.chat-reply, .chat-reply:focus
{
	border-radius: 16px!important;
	padding-top: 12px;
	padding-bottom: 12px;
	font-weight: 600;
}

.chat-message-me > .col:first-child {
    position: relative;
}

.chat-message-other > .message-bubble {
    position: relative;
}

/* Speech bubble arrow (right side) */
.chat-message-me > .col:first-child::after {
    content: "";
    position: absolute;
    top: 18px;                 /* vertical alignment of the tail */
    right: -8px;               /* pushes arrow outside the bubble */
    
    width: 0;
    height: 0;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Optional: border outline to match Bootstrap border */
.chat-message-me > .col:first-child::before {
    content: "";
    position: absolute;
    top: 18px;
    right: -9px;               /* 1px further for border illusion */
    
    width: 0;
    height: 0;
    
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    z-index: -1;
}

/* Speech bubble arrow (right side) */
.chat-message-other .message-bubble::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -9px;

    width: 0;
    height: 0;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    z-index: 0;
}

/* Fill layer (actual bubble color) */
.chat-message-other .message-bubble::after {
    content: "";
    position: absolute;
    top: 15px;
    left: -8px;

    width: 0;
    height: 0;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    z-index: 1;
}

.dropdown-menu li {
	position: relative!important;
}

.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

.bg-bigscreen {
	background: linear-gradient(-45deg, #2c2c54, #2c2c54, #b33939, #b33939);
	background-size: 400% 400%;
	animation: gradient 25s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body.bg-bigscreen .card
{
	background: rgba(0,0,0,0.6)!important;
	border-color: rgba(0,0,0,0.4)!important;
	color: #fff!important
}

body.bg-bigscreen .card.bg-light
{
	background: rgba(255,255,255,0.2)!important;
	border-color: rgba(255,255,255,0.4)!important;
	color: #333!important
}

.theme-selector
{
	width: 64px!important;
	height: 64px!important;
	border-width: 1px;
	border-style: solid;
	display: inline-block;
}

.theme-selector.theme-selector-default
{
	border-color: #C4C4C4;
	background-color: #EFEFEF;
}

.theme-selector.theme-selector-dark
{
	border-color: #27272a;
	background-color: #0a0a0a;
}

.theme-selector.theme-selector-midnight
{
	border-color: #C4C4C4;
	background-color: #1D1B29;
}

.flatpickr-current-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year
{
	font-size: 14px;
	font-weight: 600;
	padding-top: 4px;
	padding-bottom: 4px;
}

.flatpickr-day
{
	font-weight: 600;
	font-size: 13px;
}