:root {
	--c-white: white;
	--c-white-light: #C2CFE0;
	--c-white-pink: #F5F5F5;
	--c-blue-dark: #334D6E;
	--c-blue: #2a7fd9;
	--c-blue-hover: #2b76c7;
	--c-green: #00693B;
	--c-green-100: #00c56f;
	--c-text: #242424;
	--c-bg-btn: #f5f9fd;
	--c-bg-btn-hover: #e8eaed;
	--c-bg-btn-hover-2: #eef8ff;
	--box-shadow: 0px 3px 6px #c9c9c9;
	--gray-slight: #f8f8f8;
	--gray-slight-2: #f0f0f0;
	--popup-border-radius: 6px;
	--c-slight-blue-hover: #eaecf9;
	--c-warning: #ff0000;
	/* --ov-primary-color: #0a0a0a; */

	/* Neutral */
	--neutral-0: #ffffff;
	--neutral-1: #fcfcfc;
	--neutral-2: #f2f4f7;
	--neutral-3: #eaecf0;
	--neutral-4: #d0d5dd;
	--neutral-5: #98a2b3;
	--neutral-6: #667085;
	--neutral-7: #475467;
	--neutral-8: #344054;
	--neutral-9: #182230;

	--primary-100: #CFECDE;
    --primary-200: #A0D9BD;
    --primary-300: #70C59D;
    --primary-400: #41B27C;
    --primary-500: #119F5B;
    --primary-600: #0E7F49;
    --primary-800: #074024;
    --primary-900: #032012;

	/* Gray modern */
	--gray-modern-500: #697586;
	--gray-modern-900: #121926;

	/* border */
	--border-black: #334d6e;

	/* Table */
	--table-gray: #cdd6df;

	/* Semantic */
	--semantic-waiting: #fbc852;
	--semantic-secondary-background: #c0e2fc;
	--semantic-secondary: #0960bd;
	--semantic-highlight: #f46414;
	--semantic-cancelled: #e22a2a;
	--semantic-cancelled-background: #f9d2d2;
	--semantic-success: #1e863d;
	--semantic-success-background: #e4ffec;

	/* Gradient */
	--gradient-primary: linear-gradient(90deg, #3c5d87 0%, #588bd8 100%);

	/* Background */
	--finished-background: #e6eff8;
	--secondary-background: #f9fafb;

	/* Text & icon */
	--title-text: #182230;
	--body-text: #242424;
	--body-text-2: #525252;
	--hover-icon: #e7e7e7;
	--icon-gray: #c2cfe0;

	/* Opacity */
	--gray-80: rgba(232, 237, 244, 0.9);
	--gray-65: rgba(232, 237, 244, 0.65);

	/* Primary */
	--primary: #334d6e;
	--primary-hover: #4a6e9c;
	--dark-green: #00693b;

	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 6px;
	--spacing-md: 8px;
	--spacing-lg: 12px;
	--spacing-xl: 16px;

	/* Border */
	--radius-md: 8px;
	--radius-full: 9999px;
}


@font-face {
	font-family: Roboto;
	src: url('font/roboto-normal.ttf') format('truetype');
}

@font-face {
	font-family: Roboto;
	src: url('font/roboto-bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: Roboto;
	src: url('font/roboto-500.ttf') format('truetype');
	font-weight: 500;
}

body {
	padding: 0px;
	margin: 0px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--c-text);
}

* {
	box-sizing: border-box;
	font-family: Roboto, sans-serif;
	letter-spacing: 0.02em;
}

input:focus {
	outline: solid 1px #0960bd;
}

textarea:focus {
	outline: solid 1px #0960bd;
}

select:focus {
	outline: solid 1px #0960bd;
}

button:hover,
select:hover {
	cursor: pointer;
}

.clear {
	clear: both;
	display: inline-block;
}

input,
button,
select {
	font-family: Roboto;
	font-size: 14px;
	letter-spacing: 0.02em;
}

img,
svg {
	vertical-align: middle;
}

p {
	margin: 0px;
}

table {
    border-collapse: collapse;
}

.resizer {
	cursor: col-resize;
	height: 100%;
	left: 0;
	top: 0;
	width: 4px;
	position: absolute;
	z-index: 2;
}

.resizer:hover {
	cursor: col-resize;
	background: #334d6e;
}

.card-purpose > ul {
	padding: 0px;
	padding-left: 12px;
	margin: 0px;
}

.page-intro-container {
	width: 100%;
	text-align: center;
	padding-top: 80px;
}


.page_intro_tab {
	width: calc(100% - 32px);
	overflow-wrap: break-word;
	text-align: center;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.02em;
	color: #525252;
	margin: 16px 12px;
}

.inputDate::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.inputDate{
  position: relative;
}

.disableBtn {
	background: #cdd6df;
	color: white;
	border: 1px solid #cdd6df;
	cursor: not-allowed;
}

.btn-common {
	border-radius: 6px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	letter-spacing: 0.02em;
	padding: 8px 24px;
	min-width: 122px;
	box-shadow: 0 1px 5px #00000026;
}

.btn-color--green {
	background: #00693b;
	color: #ffffff;
	border: 1px solid #00693b;
}

.btn-color--blue {
	background: #334d6e;
	color: white;
	border: 1px solid #334d6e;
}

.btn-color--white {
	background: white;
	color: #334d6e;
	border: 1px solid #334d6e;
}

.inp-common {
	background: #fefeff;
	border: 1px solid #cdd6df;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 15px;
	letter-spacing: .02em;
	line-height: 24px;
	width: 100%;
}
.fadeIn {
	opacity: 1;
	animation: fadeInAnimation .2s ease-in-out forwards;
}

/* Style for the scrollbar container */
::-webkit-scrollbar {
  width: 5px; /* Width of the vertical scrollbar */
  height: 7px; /* Height of the horizontal scrollbar */
}

/* Style for the scrollbar track (background) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light gray color for the track */
}

/* Style for the scrollbar thumb (the handle) */
::-webkit-scrollbar-thumb {
  background: #888; /* Darker gray color for the handle */
}

/* Style for the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Even darker gray when hovered */
}

/* Optional: Style the scrollbar buttons (if supported) */
::-webkit-scrollbar-button {
  display: none; /* Hide the buttons */
}

img {
	max-width: 100%;
}


@keyframes fadeInAnimation {
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
}
@media screen and (max-width: 600px) {
	.resizer {
		display: none;
	}
}