/* CSS Document 
Theme Name: KLPGA Personal Info
Theme URI: 
Description: KLPGA Personal theme
Author: 
Author URI: 
*/

/*--------------------------------------------------------------------------------*/
/*--------------------------------- FONT STYLES ----------------------------------*/
/*--------------------------------------------------------------------------------*/

@font-face {
	font-family: 'SUIT Variable';
	font-weight: 100 900;
	src: url('../fonts/SUIT-Variable.woff2') format('woff2-variations');
}

/*--------------------------------------------------------------------------------*/
/*------------------------------------ Basic -------------------------------------*/
/*--------------------------------------------------------------------------------*/

html { -webkit-font-smoothing: antialiased; font-size:14px; scroll-behavior: smooth; }
body { background-color: #FFF; letter-spacing: -0.5px; }

body,td,form,input, select, textarea {
	font-size:16px;
	font-family: 'SUIT Variable', 'Open Sans', sans-serif;
	color:#000;
	line-height:1.5rem;
	margin:0 0 0 0 ;	
}

table, img {border:none;border-spacing:0px;border-collapse:collapse;}
tr, td, th {padding:0px;color: hsl(0, 0%, 20%);}

form,input, select, textarea {
   scrollbar-face-color: #ffffff;
   scrollbar-shadow-color: #feebf2;
   scrollbar-highlight-color: #feebf2;
   scrollbar-3dlight-color: #ffffff;
   scrollbar-darkshadow-color: #ffffff;
   scrollbar-track-color: #FFFFFF;
   scrollbar-arrow-color: #feebf2;
}

a {selector-dummy:expression(this.hideFocus=true);}

a:link   	{ color:#000; text-decoration:none;}
a:visited	{ color:#000; text-decoration:none;}
a:hover   	{ color:#000; text-decoration:none;}
a:active 	{ color:#000; text-decoration:none;}

ul, li {list-style:none; margin:0; padding:0}
li { padding-left:16px; padding-bottom:5px;}

h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; line-height: 1.2; margin:0; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000; }
small, label { font-size: 0.875rem; }
.caption { font-size: 0.875rem; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.313rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-7 { font-size: 0.938rem; }
.fs-8 { font-size: 0.875rem; }
.fs-9 { font-size: 0.75rem; }
.line-1 { line-height: 1em !important; }
.line-2 { line-height: 1.2em !important; }
.line-3 { line-height: 1.5em !important; }
.line-4 { line-height: 2em !important; }
.line-5 { line-height: 3em !important; }
.rounded-4 { border-radius: 0.4rem !important; }
.rounded-5 { border-radius: 0.5rem !important; }
.rounded-10 { border-radius: 1rem !important; }
.rounded-15 { border-radius: 1.5rem !important; }
.rounded-20 { border-radius: 2rem !important; }

p, pre { line-height: 1.4; font-size: 1rem; }

textarea { border: none; outline: 0; color: #000; padding: 6px; }
input { border: none; outline: 0; color: #000; }
select { border: none; outline: 0; color: #000; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
tr td, th { border: 1px solid #ddd; padding: 1rem 1.4rem; text-align: inherit;	text-align: -webkit-match-parent; }
span, dt, dd { display: inline-block; font-weight: normal; }	
dl { position: relative; display: flex; margin-bottom: 0; }
details { position: relative; }
summary { position: relative; list-style: none; }

.container { text-align: left; margin: 0 auto; position: relative; }
.container-out { padding-right: var(--bs-gutter-x, 1rem) !important; padding-left: var(--bs-gutter-x, 1rem) !important; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.container-overflow-x { position: relative; margin: 0 auto; width: 100%; max-width: 1280px; overflow: hidden; padding-left: var(--bs-gutter-x, 0.75rem); }
@media (min-width: 576px) { .container-overflow-x { padding-left: calc((100% - 540px)*0.5); } }
@media (min-width: 768px) { .container-overflow-x { padding-left: calc((100% - 720px)*0.5); } }
@media (min-width: 992px) { .container-overflow-x { padding-left: calc((100% - 960px)*0.5); } }
@media (min-width: 1400px) { .container-overflow-x { max-width: 1280px; padding-left: 0; } }

img { max-width: 100%; }

.mc-only { display: none !important; }
.pc-only { display: block !important; }
span.mc-only { display: none !important; }
span.pc-only { display: inline-block !important; }
th.pc-only, td.pc-only { display: table-cell !important; }

.match-height>[class*=col] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }
.match-height>[class*=col]>.card { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }

.keycolor, .keycolor a { color: #0d6efd !important; }
.keybg { background: #0d6efd !important; }
.fw-thin { font-weight: 100 !important; }
.fw-normal { font-weight: 300 !important; }
.fw-sb { font-weight: 600 !important; }
.fw-bold { font-weight: 800 !important; }
.fw-bolder { font-weight: 900 !important; }

.text-primary { color: #0d6efd !important; }
.text-blue, .text-blue a { color: #0158FF !important; }
.text-navy, .text-navy a { color: #002D9C !important; }
.text-gray, .text-gray a { color: #797979 !important; }
.bg-0 { background-color: transparent !important; }
.bg-cover { background-size: cover; background-position: center; }
.bg-contain { background-size: contain; background-position: center; }
.bg-white { background: #FFF !important; }
.bg-light { background: #e6eaec !important; }
.bg-gray { background: #797979 !important; }
.bg-navy { background: #002D9C !important; }
.border-blue { border-color: #002D9C !important; }
.border-navy { border-color: #002D9C !important; }

.fillter-white { filter: brightness(0) invert(1); }
.ul-flex { display: flex; }
.ul-flex li { flex: 1 1 0; padding-left: 0; }
.ul-flexauto { display: flex; }
.ul-flexauto li { flex: 1 1 auto; padding-left: 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.scroll li { display: inline-block; }

/*--------------------------------------------------------------------------------*/
/*------------------------------------ Header ------------------------------------*/
/*--------------------------------------------------------------------------------*/

.site-header { width: 100%; margin: 0 auto; background: #00305B;  position: fixed; top: 0; z-index: 99; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.125); }
.site-header.menu-opened .main-menu { background: #00305B; position: fixed; width: 100%; height: 100vh; overflow: auto; }
.site-header.menu-opened .main-logo img { filter: brightness(0) invert(1); }
.site-header { transition-duration: 300ms; transition-property: transform; transform: translateY(0px); }
.site-header.cambio_header { transition-duration: 300ms; transition-property: transform; transform: translateY(-170px); will-change: position, transform; }
.site-header.menu-opened.cambio_header { top: 0px; }
.site-header, .navbar { height: 79px; }
.main-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.main-logo img { filter: brightness(0) invert(1); }
.navbar-right { position: absolute; right: 0; }
.navbar-right li { float: left; padding-bottom: 0; }
.navbar-right li a { color: #ddd; padding: 0.25rem 0.25rem; }
.navbar-right li a:hover { color: #fff; }

/*--------------------------------------------------------------------------------*/
/*------------------------------------ main area ---------------------------------*/
/*--------------------------------------------------------------------------------*/

/* section */
.section-area { width:100%; height: auto; margin:0 auto; position: relative; padding: 3rem 0; }

.card-program { border-radius: 2rem; overflow: hidden; padding: 0; border: 0; min-height: 324px; margin-bottom: 3rem; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.125); }
.card-program:hover { box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25); }
.card-program .card-header { display: flex; justify-content: space-between; align-items: start; padding: 2rem; font-size: 1.25rem; color: #457a9d; background-color: transparent; border: 0; background-repeat: no-repeat; background-size: contain; background-position: top 5px right 10px; }
.card-program .card-body { padding: 0.5rem 2rem; border: 0; }
.card-program .card-footer { display: flex; justify-content: space-between; padding: 2rem; border: 0; background-color: #eff5ee; }
.card-program .title { font-size: 1.625rem; line-height: 1.2; margin-bottom: 1rem; font-weight: bold; }
.card-program .card-footer .icon { cursor: pointer; }

/*--------------------------------------------------------------------------------*/
/*--------------------------------- Form & Button --------------------------------*/
/*--------------------------------------------------------------------------------*/

input:focus, button:focus, select:focus, textarea:focus { box-shadow: none !important; }
.btn-xxl, .btn-group-xxl > .btn { padding: 1.25rem 3rem; font-size: 2rem; }
.btn-xl, .btn-group-xl > .btn { padding: 1rem 2rem; font-size: 1.5rem; }
.btn-lg, .btn-group-lg > .btn { border-radius: 0.5rem; padding: 0.5rem 1.5rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; min-width: 54px; }
.btn-xm, .btn-group-xm > .btn { padding: 0.125rem 0.25rem; font-size: 0.75rem; }
.form-select-xl { padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1rem; padding-right: 3rem; font-size: 2.25rem; background-size: 20px 16px; }
.form-select-xl option { font-size: 1.25rem; }
.form-select.text-white option { color: #000 !important; }
.filter-white { filter: brightness(0) invert(1); }
.filter-gray { filter: grayscale(1); }

.btn-primary { background-color: #0d6efd; border-color: #0d6efd; color: #FFF; }
.btn-primary:hover { background-color: #002D9C; border-color: #002D9C; color: #FFF; }
.btn-outline-primary { color: #457a9d; border-color: #457a9d; min-width: 90px; }
.btn-outline-primary:hover { background-color: #e6eaec; border-color: #316080; color: #000; }
.btn-blue { background-color: #3E98F7; border-color: transparent; color: #FFF; }
.btn-blue:hover { background-color: #FFF; border-color: #3E98F7; color: #3E98F7; }
.btn-navy { background-color: #002D9C; border-color: #002D9C; color: #FFF; }
.btn-navy:hover { background-color: #00305B; border-color: #00305B; color: #FFF; }
.btn-white { background-color: #FFF; border-color: transparent; color: #000; }
.btn-white:hover { background-color: #3E98F7; color: #FFF; }

.form-control-xl { min-height: calc(1.75em + 1rem + 2px); padding: 0.75rem 2rem; font-size: 1.75rem; border-radius: 0.3rem; }
.form-control-xxl { min-height: calc(2em + 1rem + 2px); padding: 2rem 2rem; font-size: 2rem !important; border-radius: 0.5rem; }
input.form-control-xl::placeholder, input.form-control-xxl::placeholder  { font-size: 1.25rem; }
input.placeholder-text-center::placeholder { text-align: center; }
input.placeholder-text-end::placeholder { text-align: end; }
.form-control-datepicker { background: url(../images/btn-datepicker.png) no-repeat center right 6px; background-size: 30px; cursor: pointer; }

.form-check-input[type=radio] { font-size: 1.25rem; color: #3251F5; border-color: #3251F5; width: 20px; height: 20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='rgba(255, 255, 255, 1)'/></svg>"); }
.form-check-input[type=checkbox] { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>"); }
.form-check-input:checked[type=radio] { background-color: #3251F5; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='rgba(255, 255, 255, 1)'/></svg>"); }
.form-check-input:checked[type=checkbox] { background-color: #3251F5; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>"); }
.form-check .form-check-input, .form-check .form-check-label { margin-top: 0.25em; }
.form-check-lg .form-check-input { width: 25px; height: 25px; }
.form-check-lg .form-check-label { font-size: 1.375rem; }


/*--------------------------------------------------------------------------------*/
/*---------------------------------- page header ---------------------------------*/
/*--------------------------------------------------------------------------------*/

.header-margin { margin-top: 80px; }
.title-group { position: relative; margin-bottom: 2rem; }
.title-group .title { display: flex; align-items: center; font-weight: bold; margin-bottom: 0; padding-bottom: 0; line-height: 1.4; }
.title-group .title span { display: inline-flex; font-weight: bold; }
.title-group .title span img { max-height: 30px; }


/*--------------------------------------------------------------------------------*/
/*------------------------------------ content -----------------------------------*/
/*--------------------------------------------------------------------------------*/

.section-title { display: flex; align-items: center; justify-content: space-between; background-color: #dde4eb; padding: 0.75rem 1rem; margin-bottom: 1.5rem; }
.section-title h2 { font-size: 1.325rem; padding-bottom: 0; }
.section-title .entry-thumb { margin-left: 5px; margin-right: 0; }
.round-title { display: flex; width: fit-content; background-color: #00305B; color: #FFF; text-align: center; padding: 0.5rem 2rem; border-radius: 2rem; margin: 10px auto; }
.list-group.border-0 { padding-left: 0; }
.list-group.border-0 li { padding-left: 0; border: 0; }
.list-group-sm li { font-size: 1rem; }
.list-group-policy li { padding-left: 0; font-size: 1rem; padding-inline-start: 1rem; }
.list-group-policy li::before { position: relative; display: inline-block; content: "- "; width: 1rem; margin-left: -1rem; }
.entry-box { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
.entry-box-lg { padding: 1.5rem 2rem; border: 1px solid #ddd; border-radius: 0.5rem; }
.entry-thumb { display: inline-flex; width: 32px; height: auto; margin-right: 10px; }
.entry-thumb img, .entry-thumb-lg img { width: 32px; height: auto; }
.entry-thumb-lg { width: 50px; height: 50px; margin: 10px auto; }
.entry-thumb.double { width: 72px; height: auto; }
.entry-thumb.triple { width: 108px; height: auto; }
.entry-thumb.double img, .entry-thumb.triple img { margin-right: 4px; }
.entry-box p { margin-bottom: 0; }
.entry-box-lg .list-group-item a { display: flex; align-items: center; }


/*--------------------------------------------------------------------------------*/
/*------------------------------------ Table -------------------------------------*/
/*--------------------------------------------------------------------------------*/

/* table */
.table > :not(:last-child) > :last-child > * { border-bottom-color: inherit; }
.table>:not(caption)>*>* { font-size: 1.125rem; padding: 0.875rem 1rem; background-color: var(--mdb-table-bg); border-bottom-width: 1px; box-shadow: inset 0 0 0 9999px var(--mdb-table-accent-bg); }
.table-sm tr th, .table-sm tr td { font-size: 1rem; padding: 0.5rem 1rem; }
.table-md tr th, .table-md tr td { font-size: 1rem; padding: 1.25rem 1.5rem; }
.table-lg tr th, .table-lg tr td { font-size: 1.25rem; padding: 1.25rem 2rem; }
.table tr td, .table th { vertical-align: middle; }
.table-gray tr th { background: #f5f5f5; }
.table-gray tr td { border-color: #ddd !important; }
.table.border-0 tr th, .table.border-0 tr td { border: none; }
.text-white th, .text-white td { color: #FFF; }
.table-wrapper { width: 100%; overflow-x: auto; }
.table caption { font: 0 / 0 a; }


/*--------------------------------------------------------------------------------*/
/*----------------------------------- footer area --------------------------------*/
/*--------------------------------------------------------------------------------*/

.section-copyright, .section-copyright a { color: #333; font-size: 16px; font-size: 1rem; }
.section-copyright a:hover { color: #000; }
.section-copyright p { font-size: 16px; font-size: 1rem; }



/*--------------------------------------------------------------------------------*/
/*----------------------------------- responsive ---------------------------------*/
/*--------------------------------------------------------------------------------*/

@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1280px; }
}

@media (max-width: 992px) {
	body { font-size: 14px; }
	.fs-1 { font-size: 1.75rem !important; }
	.fs-2 { font-size: 1.5rem !important; }
	.fs-3 { font-size: 1.313rem !important; }
	.fs-4 { font-size: 1.125rem !important; }
	.fs-5 { font-size: 1rem !important; }
	.fs-6 { font-size: 0.938rem !important; }
	.fs-7 { font-size: 0.875rem !important; }
	.fs-8 { font-size: 0.75rem !important; }
	.fs-9 { font-size: 0.625rem !important; }

	tr td, th { }
	.pc-only { display: none !important; }
	.mc-only { display: block !important; }
	span.pc-only { display: none !important; }
	span.mc-only { display: inline-block !important; }
	th.pc-only, td.pc-only { display: none !important; }
	th.mc-only, td.mc-only { display: table-cell !important; }

	/* header */
	.site-header, .navbar { height: 65px; }
	.main-menu .navbar { padding: 0 !important; }
	.main-logo img { max-height: 30px; }
	.header-margin { margin-top: 65px; }

	/* button */
	.btn-xxl, .btn-group-xxl > .btn { padding: 1rem 2rem; font-size: 1.5rem; }
	.btn-xl, .btn-group-xl > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; }
	.btn-lg, .btn-group-lg > .btn { }
	.btn-sm, .btn-group-sm > .btn { padding: 0.125rem 0.25rem; font-size: 0.75rem; }
	.btn-xm, .btn-group-xm > .btn { }
	.form-select-xl { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem; font-size: 1.25rem; background-size: 16px 12px; }
	.form-select-xl option { font-size: 1rem; }

	/* content */
	.section-area { padding: 1rem 0; }
	.section-title h2 { font-size: 1.25rem; }
	.entry-box { padding: 0.25rem 0.5rem; }
	.entry-box-lg { padding: 1rem; }
	.entry-thumb { width: 24px; height: auto; margin-right: 8px; }
	.entry-thumb img { width: 24px; }
	.entry-thumb.double { width: 62px; }
	.entry-thumb.triple { width: 108px; }

	/* copyright */
	.section-copyright { font-size: 0.875rem; }
	.footer-copyright p { font-size: 0.688rem; margin-bottom: 0.25rem; }

}