/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

html {
    background: #020024;
    background: linear-gradient(180deg, #020024 0%, #3274b7 0%, #21b5c2 100%);
    min-height: 100%;
    background-attachment: fixed;
    height: 100%;
}


@font-face {
    font-family: rubik-bold;
    src: url(/reports/fonts/Rubik-Bold.ttf);
    unicode-range: U+0020-00FF;
}

@font-face {
    font-family: rubik-light;
    src: url(/reports/fonts/Rubik-Light.ttf);
    unicode-range: U+0020-00FF;
}

.font-face-regular {
    font-family: 'rubik-light', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}

.font-face-regular h1 {
    font-family: 'rubik-bold', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-weight: 700;
}

.font-face-regular h2 {
    font-family: 'rubik-bold', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-weight: 700;
}

.font-face-regular h3 {
    font-family: 'rubik-bold', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-weight: 700;
}

.font-face-vi {
    font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif’;
}

.font-face-vi h1 {
    font-weight: 700;
}

.font-face-vi h2 {
    font-weight: 700;
}

.font-face-vi h3 {
    font-weight: 700;
}

.font-face-vi body {
    font-weight: 500;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

body {
    margin-bottom: 0px;
}

body, .card {
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-family: rubik-light, helvetica, sans-serif;
    color: #4d4d4f;
    border: none;
    border-radius: 0px;
}

.card-header {
    background-color: rgba(0, 0, 0, 0);
    font-family: rubik-light, helvetica, sans-serif;
    color: #4d4d4f;
    border-bottom: none;
    padding-right: 0px;
    z-index: 1;
    user-select: none;
}

.card-body {
    box-shadow: 4px 4px 4px 3px rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    color: #4d4d4f;
    background-color: #fff;
    padding: 30px;
    z-index: 5;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

h1 {
    font-size: 36px;
    color: #fff;
}


h2 {
    font-size: 30px;
    color: #fff;
}

h3 {
    font-size: 24px;
    color: #4d4d4f;
}


/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.overflow-scroll {
    overflow: auto;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 0px;
}
.footer {
    margin-top: 25px;
    background-color: #F0F0F0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

.container {
    padding-top: 30px;
}

/* class applies to select element itself, not a wrapper element */
.select-css {
    display: block;
    font-family: rubik-light;
    line-height: 1.3;
    padding: 0.6em 1.4em 0.5em 0.8em;
    width: 100%;
    max-width: 100%;
    /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    border: none;
    outline: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
    background-color: transparent;
    /* border-color: transparent; */
    /* border-width: 0px; */
    color: #4d4d4f;
    /* border-image-width: 0px; */
    /* border-bottom-color: transparent; */
    text-decoration: underline;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */
.select-css:hover {
    border-color: #888;
}
/* Focus style */
.select-css:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    color: #4d4d4f;
    outline: none;
}
/* Set options to normal weight */
.select-css option {
    font-weight: normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
    background-position: left 0.7em top 50%, 0 0;
    padding: 0.6em 0.8em 0.5em 1.4em;
}
/* Disabled styles */
.select-css:disabled,
.select-css[aria-disabled=true] {
    color: graytext;
}

.select-css:disabled:hover,
.select-css[aria-disabled=true] {
    border-color: #aaa;
}

.li {
    color: #000;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 0px 10px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #007bff;
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.btn {
    border-radius: 20px;
}

.btn-primary {
    background-color: #007bff;
}

.centered-label-spaced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}

.centered-label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

input {
    border-radius: 25px;
    font-size: 12px;
    padding: 10px;
    border-width: 1px;
}

.date-card {
    position: absolute;
    z-index: 10;
}

@media (max-width: 1200px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    .left {
        float: none;
    }

    .right {
        float: none;
    }
}

@media (min-width: 1200px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    .left {
        float: left;
    }

    .right {
        float: right;
    }
}

.ranges {
    float: right !important;
}

.daterangepicker-inline {
    border: 0 !important;
    position: static !important;
}

.ignore-dim {
    z-index: 5;
}

.dim {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6 !important;
    background-color: black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75; /* khtml, old safari */
    -moz-opacity: 0.75; /* mozilla, netscape */
    opacity: 0.75; /* fx, safari, opera */
}

.daterangepicker.openscenter:after {
    right: -50% !important;
}

.daterangepicker.openscenter:before {
    right: -50% !important;
}

.daterangepicker td.active {
    background-color: #007bff !important;
}

.form-control {
    border-radius: 25px !important;
}

.form-control:focus {
    box-shadow: inset 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
}

.drawer-button {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    color: #f4f4f4;
    background-color: #719e2a;
    padding: 25px 10px 0px 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    z-index: 3;
    user-select: none;
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions */
}

.drawer-button:hover {
    background-color: #8ac635;
}

.drawer-button:active {
    background-color: #56771e;
}

.drawer-content {
    background-color: #f8f9fa;
    border-radius: 0 0 40px 40px;
    border-color: #719e2a;
    border-style: solid;
    border-width: 4px;
    padding: 10px;
    margin: -5px 50px 0 50px;
    z-index: 4;
}

.robot-icon{
    width: 50px;
    height: 50px;
    margin: 10px;
}

.hidden{
    display: none;
}

.loading{
    padding: 25px;
}

#insight-panel {
    padding: 20px;
}

.learning-card {
    padding-top: 45px;
}

.btn-applaunch {
    background-color: #424195;
    color: white;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    margin: 10px;
    display: inline-flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions */
}

.btn-applaunch:hover {
    background-color: #5b5bca;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow */
    color: white;
}

.btn-applaunch:active {
    background-color: #2b2b7a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow */
    transform: translateY(2px); /* Slightly moves down */
    color: #c8c8c8;
}

.btn-applaunch img {
    width: 50px; /* Set the width */
    height: 50px; /* Set the height */
    margin-right: 10px; /* Space between image and text */
}