@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root
{
	--muted: #556380;
	--bordercolour: #d3e0ea;
	--greentext: #e0000b; /*0e8c41;*/
	
}
#modal
{
	font-family: Inter;
	color: #0e1e47;
}
#modal h1, #modal h2, #modal h3, #modal h4, #modal h5, #modal h6
{
	font-family: Plus Jakarta Sans;
}
#modal p
{
	text-justify: none;
	line-height: normal;
	padding: 0;
}
#modal label
{
	float: none;
	width: auto;
}
#modal .btn
{
	font-weight: 500;
}
#modal .btn-light
{
	background-color: #f4f9fd;
}
#modal .btn-light:hover, #modal .btn-light:active, #modal .btn-light.active, #modal .btn-light:focus
{
	background-color: #e6f0f8 !important;
	border-color: #e6f0f8 !important;
}
#modal .btn:active, #modal .btn.active
{
	translate: 0 1px;
}
#modal .btn-success
{
	background-color: #0069e0;
	border-color: #0069e0;
	color: white; /*#f7fef8;*/
}
#modal .btn-success:hover
{
	background-color: #2282f0cc; /*#f0222ccc;*/ /*#0e8c41cc;*/
	border-color: #2282f0; /*#f0222c00;*/ /*#0e8c4100;*/
}
#modal .btn-success:active
{
	background-color: #0751a6 !important; /*#a6070f*/ /*#0e8c41cc;*/
	border-color: #0751a6 !important; /*#a6070f*/ /*#0e8c4100;*/
}

#modal .modal-dialog
{
	width: 800px;
	max-width: 95dvw;
}
#modal .modal-content
{
	height: 730px;
	max-height: 92.5dvh;
	border-radius: 11px;
	border: 0;
	background-color: transparent;
}
#modal .modal-content > div
{
	height: 100%;
	width: 100%;
}
#modal .btn-close
{
	position: absolute;
	top: 15px;
	right: 15px;
}
#modal .imgdiv
{
	background-image: linear-gradient(155deg, #f4f9fddd, #f4f9fdaa, #f4f9fd77, #f4f9fd33, #f4f9fd00), url("https://www.flogen.org/sips2026/images/riobg3.jpg");
	/*height: 100%;*/
	width: 45%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	border-radius: 10px 0 0 10px;
}
#modal .imgdiv img
{
	width: 225px;
	max-width: 100%;
}
#modal .imgdiv img:first-child
{
	width: 250px;
}
#modal .formdiv
{
	/*height: 100%;*/
	width: 55%;
	border-radius: 0 10px 10px 0;
	overflow-y: auto;
	background-color: white;
}
#modal .btmcaption
{
	font-size: 12px !important;
	color: white;
}
#modal h5
{
	font-weight: bold;
	color: #29468f;
}
#modal .required
{
	color: #e0000b !important;
}
#modal h4
{
	font-weight: bold;
}
#modal form > label
{
	font-weight: bold;
}
#modal form label
{
	font-size: 14px;
}
#modal form input, #modal form select
{
	font-size: 14px;
}
#modal .desc
{
	font-size: 14px;
}
#modal small
{
	font-size: 10px !important;
}
#modal .iconrow
{
	color: white;
}
#modal .iconrow i
{
	font-size: 24px !important;
}
#modal .iconrow .iconlabel
{
	font-size: 12px !important;
}
#modal .points h6
{
	letter-spacing: 0.2em;
	margin: 0px;
	font-weight: 500;
	color: #29468f;
}
#modal .imgdiv hr
{
	border: 2px solid #e0000b;
	opacity: 1;
	width: 25%;
}
#modal form .input-group-text
{
	background-color: white;
	border-right: 0;
	padding: 0px;
}
#modal form input[type="text"], #modal form input[type="email"]
{
	border-left: 0;
}

@media (max-width: 576px)
{
	#modal .modal-content
	{
		overflow-y: auto;
	}
	#modal .imgdiv
	{
		width: 100%;
		border-radius: 10px 10px 0 0;
	}
	#modal .formdiv
	{
		width: 100%;
		border-radius: 0 0 10px 10px;
		overflow-y: visible;
	}
}

.modal-open
{
	overflow: visible !important;
	padding-right: 0 !important;
}