@charset "UTF-8";
@font-face{
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Roboto';
  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root{
--color-primary:#04a6b8;
--color-primary-text:#ffffff;
--color-secondary:#003054;
--color-secondary-text:#666666;
--color-success:#16a34a;
--color-warning:#f59e0b;
--color-danger:#dc2626;
--color-info:#0ea5e9;

--text-main:#1f2933;
--text-secondary:#4b5563;
--text-muted:#9ca3af;
--text-inverse:#ffffff;
--text-link:#04a6b8;
--text-link-hover:#0395a6;

--bg-body:#ffffff;
--bg-soft:#f8fafc;
--bg-light:#f1f5f9;
--bg-dark:#111827;
--bg-primary:#04a6b8;
--bg-secondary:#2c3e50;

--border-color-primary:#04a6b8;
--border-color:#e5e7eb;
--border-color-dark:#374151;
--border-radius-xs:4px;
--border-radius-sm:6px;
--border-radius-md:10px;
--border-radius-lg:16px;

--form-border-color:rgba(0,0,0,.2);
--form-border-radius:6px;
--form-border-width:1px;

--box-shadow-xs:0 1px 2px rgba(0,0,0,.04);
--box-shadow-sm:0 2px 6px rgba(0,0,0,.06);
--box-shadow-md:0 6px 20px rgba(0,0,0,.08);
--box-shadow-lg:0 12px 32px rgba(0,0,0,.12);
--box-shadow-h:0 8px 30px rgba(0,0,0,.10);

--box-shadow-left-h:-8px 0px 30px rgba(0,0,0,.10);

--font-main:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


--transition-fast:.15s ease;
--transition-base:.25s ease;
--transition-slow:.4s ease;
}
/* GLOBAL BASE */
body{
  font-family: var(--font-main);
  color: var(--text-main);
  background-color: var(--bg-body);
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
  --bs-gutter-x: unset!important;
  --bs-gutter-y: unset!important;
}

/* FORM ELEMENTS */
button,
input,
select,
textarea{
  font-family: inherit;
}
/* =========================
   HEADER
========================= */
header{
position:relative;
width:100%;
height: 84px;
z-index:999;
background:var(--bg-body);
box-shadow:var(--box-shadow-sm);
transition:var(--transition-base);
}



/* =========================
   STICKY HEADER
========================= */
header.sticky-top{
position:sticky;
top:0;
background:var(--bg-body);
box-shadow:var(--box-shadow-h);
animation:stickyHeaderSlideDown .7s ease-in-out;
z-index: 99999;
}

/* =========================
   STICKY ANIMATION
========================= */
@keyframes stickyHeaderSlideDown{
from{
transform:translateY(-100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}

/* =========================
   NAVBAR LINKS
========================= */


.navbar-toggler{
  border: 0;
}

.navbar-toggler i{
  font-size: 22px;
  color: var(--color-primary);
  transition:
    transform .25s ease,
    opacity .2s ease;
}

.navbar-toggler i.is-changing{
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}



.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}


.navbar-nav .nav-link{
font-weight:500;
color:var(--text-main);
padding:.5rem 1rem;
transition:color var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
color:var(--color-primary);
}

/* =========================
   BRAND LOGO
========================= */
.navbar-brand img{
width:150px;
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu{
border:1px solid var(--border-color);
border-radius:var(--border-radius-md);
box-shadow:var(--box-shadow-md);
}

.dropdown-item{
font-size:14px;
padding:10px 14px;
color:var(--text-main);
transition:background var(--transition-fast),color var(--transition-fast);
}

.dropdown-item:hover{
background:var(--bg-soft);
color:var(--color-primary);
}

.dropdown-item i{
color:var(--color-primary);
}

.dropdown-toggle::after{
  display: none !important;
}

.dropdown > .dropdown-toggle{
  position: relative;
  padding-right: 2rem;
  right: -1rem;
}

.dropdown > .dropdown-toggle::before{
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-link);
  opacity: .6;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

.dropdown > .dropdown-toggle[aria-expanded="true"]::before{
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
}


/* =========================
   MOBILE FIX
========================= */
@media (max-width:991px){
.navbar-nav{
text-align:center;
}

.dropdown-menu{
position:static;
box-shadow:none;
border:none;
}
}
.img-contain{
  object-fit: contain;
  object-position: center;
}
.logged-in-icon{
border: 1px solid var(--border-color-primary);
}
.online-dot {
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 50%;
    position: absolute;
    top: .1rem;
    right: 2.8rem;
    padding: 3px;
    border: 1px solid var(--border-color-primary);
}
@media (max-width: 991px){
  header .dropdown,
  header .nav-link{
    position: relative;
    z-index: 1050;
  }
  .dropdown > .dropdown-toggle{
    padding-right: 1rem!important;
  }
}

#mobileMenu {
  margin-top:90px;
  width: 200px;
  z-index: 1060;
}
@media (max-width: 991px){

  /* Avatar dropdown mobil fix */
  .navbar .dropdown-menu{
    position: absolute !important;
    float: none;
    width: 100%;
    margin-top: .75rem;
    box-shadow: none;
    border-radius: 12px;
  }
  .navbar-nav .nav-link{
    float: left;
  }

  .offcanvas-body{
    box-shadow:var(--box-shadow-left-h);
  }
  .offcanvas.offcanvas-end{
    border: unset!important;
  }
  .dropdown > .dropdown-toggle::before{
    right: .8rem!important;
  }
  .online-dot{
    right: 1.6rem!important;
  }
}
.ui-widget.ui-widget-content{
  border: 1px solid var(--color-primary)!important;
}
.ui-widget-header{
  background: #04a5b763!important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
  border: 1px solid var(--color-primary)!important;
  background: var(--color-primary)!important;
  color: var(--color-primary)!important;
  outline:0!important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{
  border: 1px solid var(--color-primary)!important;
  background: var(--color-primary)!important;
  color: var(--color-primary)!important;
  outline:0!important;
}
.form-select:focus{
    border-color: unset!important;
    box-shadow: unset!important;
}