@charset "UTF-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2024-04-02
 * 3. Client: Nimbusnetworks
 4. Themes: Light Mode Theme
 */

/*========== Font ==========*/
/* Pretendard Variable */
@font-face {
	font-family:'Pretendard';
	font-weight: 400;
	src: url('/assets/stylesheets/template/font/Pretendard-Regular.woff2') format('woff2'),
	    url('/assets/stylesheets/template/font/Pretendard-Regular.otf') format('otf'); 
} 
@font-face {
	font-family:'Pretendard';
	font-weight: 500;
	src: url('/assets/stylesheets/template/font/Pretendard-Medium.woff2') format('woff2'),
	    url('/assets/stylesheets/template/font/Pretendard-Medium.otf') format('otf'); 
} 
@font-face {
	font-family:'Pretendard';
	font-weight: 600;
	src: url('/assets/stylesheets/template/font/Pretendard-SemiBold.woff2') format('woff2'),
	    url('/assets/stylesheets/template/font/Pretendard-SemiBold.otf') format('otf'); 
} 
@font-face {
	font-family:'Pretendard';
	font-weight: 700;
	src: url('/assets/stylesheets/template/font/Pretendard-Bold.woff2') format('woff2'),
	    url('/assets/stylesheets/template/font/Pretendard-Bold.otf') format('otf'); 
} 
@font-face {
	font-family:'Pretendard';
	font-weight: 800;
	src: url('/assets/stylesheets/template/font/Pretendard-ExtraBold.woff2') format('woff2'),
	    url('/assets/stylesheets/template/font/Pretendard-ExtraBold.otf') format('otf'); 
}

/*========== Reset ==========*/
html, body { background-color: #EFF0F4; } 
body, input, button, select, textarea { font-family: "Pretendard", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.bootstrap-select .dropdown-toggle:focus { outline: none !important; outline: 0px auto -webkit-focus-ring-color !important; outline-offset: 0 !important; } 
:focus-visible, :focus { outline: none !important; } 
i { font-style: normal; } 

/*========== Common ==========*/
:root { 
	/* color */
	--main-color: #2A3A9F; 
	--active-color01: #EEEFF8; 
	--active-color02: rgba(42, 58, 159, 0.03); 
	--txt-color01: #333; 
	--txt-color02: #666; 
	--txt-color03: #575757; 
	--bg-color: #EFF0F4; 
	--error-color: #E82929; 
} 

.container-fluid > .row { display: flex; align-items: center;height: 100vh; } 
.box {position: relative;min-width: 540px;border-radius: 7px;background-color: #fff;padding: 136px 60px 60px;margin-top: 0;box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06); } 
.box::before {content: 'Login';position: absolute;top: 48px;left: 50%;transform: translate(-50%, 0);font-size: 40px;font-weight: 600;color: #111; } 
.addon-twitter {display: none; } 
.input-group { width: 100%;padding: 0 0 30px;margin: 0 0 30px;border-bottom: 1px solid #ccc;box-sizing: border-box; } 
.btn-twitter,.btn-twitter:hover {padding: 20px 16px;border-radius: 4px;background-color: #F4F5FA;font-size: 18px;font-weight: 700;color: var(--main-color); } 
.divider-form {display: none; } 
label {display: none; } 
.form-control { height: 52px; padding: 15px 20px; font-size: 18px;font-weight: 600; color: #666; background-color: #fff; border: 1px solid #D5D5E1; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; } 
.form-control::placeholder {font-weight: 400;color: #aaa; } 
.form-control:focus { border-color: var(--main-color); -webkit-box-shadow: none; box-shadow: none; } 
.has-error .form-control { border-color: var(--error-color); -webkit-box-shadow: none; box-shadow: none; } 
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, 
.has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, 
.has-error.radio-inline label, .has-error.checkbox-inline label {padding-left: 16px;font-size: 12px;color: var(--error-color); } 
.form-group:has(.btn-primary) {margin-top: 30px; } 
.btn-primary {margin: 0;padding: 16px 12px;background-color: var(--main-color);border-color: var(--main-color);border-radius: 4px;font-size: 18px;font-weight: 600;color: #fff;transition: opacity 300ms; } 
.btn-primary:hover {opacity: 0.9;background-color: var(--main-color);border-color: var(--main-color); } 

@media (max-width: 992px){
	.container-fluid > .row { justify-content: center; } 
	.box { min-width: 540px; } 
}
@media (max-width: 580px){
	.box { min-width: 420px; padding: 106px 30px 30px; } 
	.box::before { top: 26px; } 
}
.modal-backdrop.in,
.modal-backdrop {
 	/* 검은색(0,0,0)을 사용하되 투명도(0.2)를 부여하여 옅은 음영 처리 */
	background-color: rgba(0, 0, 0, 0.2) !important; 

	/* opacity: 1을 제거하거나 낮춥니다. (여기서는 background-color의 투명도로 대체) */
	opacity: 1 !important; /* 이전에 강제했던 opacity는 유지하되, 배경색을 rgba로 조정 */

	/* Z-index는 그대로 유지 */
	z-index: 1040 !important; 
}

/* 모달창 자체도 backdrop 위에 표시되도록 Z-index 조정 */
.modal {
    z-index: 1050 !important;
}
/* 닫기 버튼 스타일: 확인 버튼과 크기를 맞추고, 색상을 통일성 있게 조정 */
.btn-warning {
    margin: 0;
    padding: 16px 12px; /* .btn-primary와 동일하게 설정하여 높이/크기 일치 */
    background-color: var(--active-color01); /* 주 색상보다 옅은 배경색 사용 */
    border-color: var(--active-color01);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color); /* 주 색상 텍스트 사용 */
    transition: opacity 300ms;
}

.btn-warning:hover {
    opacity: 0.9;
    background-color: var(--active-color01);
    border-color: var(--active-color01);
}