/*
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
*/

/* Set padding to keep content from hitting the edges */
/*
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*
.dl-horizontal dt {
    white-space: normal;
}
*/

/* Set width on the form input elements since they're 100% wide by default */
/*
input,
select,
textarea {
    max-width: 280px;
}
*/


.hr-line-dashed {
    margin: 10px 0 !important;
}

.ms-options-wrap.ms-active > .ms-options {
    margin-left: 30px;
}

#searchForm .ms-options-wrap.ms-active > .ms-options {
    margin-left: 15px;
}


/* ************ common vars ************ */
:root {
    --font-size-h2: 2.6rem;
    --font-size-h3: 2.2rem;
    --font-size-h4: 1.8rem;
    --font-size-txtL: 1.6rem;
    --font-size-txt: 1.5rem;
    --font-size-txtS: 1.3rem;
    --font-size-txtXS: 1.2rem;
    --font-size-menu: 1.8rem;
    --font-size-menusub: 1.5rem;
    --colorGrayscale-L01: #F0F0F0; /* background */
    --colorGrayscale-L02: #D8D8D8; /* line */
    --colorGrayscale-L03: #C7C7C7; /* background */
    --colorGrayscale-D06: #aaa;
    --colorGrayscale-D05: #888;
    --colorGrayscale-D04: #666;
    --colorGrayscale-D03: #555;
    --colorGrayscale-D02: #333;
    --colorGrayscale-D01: #222;
    --color-red: #B21339;
    --color-red-over: #880128;
    --color-red-light: #FF95AE;
    --color-orange: #FE7817;
    --color-orange-over: #CB6012;
    --color-blue: #0075FF;
    --color-blue-over: #005AC4;
    --color-green: #2CC427;
    --color-green-over: #199B15;
    --color-gray: #868E96;
    --color-gray-over: #616972;
    --color-darkgray: #495057;
    --color-darkgray-over: #151A23;
    --color-disable-bg: #989898;
    --color-disable-txt: #DFDFDF;
}

/* ************ popup ************ */
.popupnoti {position: relative; display: flex; flex-direction: column; width: 800px; height: 800px; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); }
.popupnoti [class*="md_"]{padding: 0 20px;}
.popupnoti .md_hd{ height: 70px; border-bottom: 1px solid var(--colorGrayscale-L03); }
.popupnoti .md_con{ flex: 1; padding: 40px; overflow: auto; color: var(--colorGrayscale-D03); font-size: var(--font-size-txt); line-height: 1.5em;}
.popupnoti .md_con section{margin-bottom: 20px; }
.popupnoti .md_ft{display: flex; align-items: center; height: 80px; border-top: 1px solid var(--colorGrayscale-L03);}
.popupnoti .md_ft .btnSet{width: 100%; margin:0}

/* modal header */
.md_hd h2 {color: var(--colorGrayscale-D01); font-size: var(--font-size-h3); font-weight: 600; line-height: 70px; text-align: center; margin: 0 !important;}
.md_hd .md_hd_btns {position: absolute; right: 10px; top: 15px; padding: 0 !important;}
.md_hd .md_hd_btns > a { position: relative; width: 40px; height: 40px; float: left;}
.md_hd a > span{display: none;}
.md_hd a.close::before{content: ''; position: absolute; left: 50%; top: 50%; margin-left: -9px; width: 20px; height: 2px; background: var(--colorGrayscale-D04); transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close::after {content: ''; position: absolute; left: 50%; top: 50%; margin-top: -9px; width: 2px; height: 20px; background: var(--colorGrayscale-D04); transform: rotate(45deg); transition:all 0.2s ease;}
.md_hd a.close:hover::before{background: var(--color-orange);}
.md_hd a.close:hover::after{background: var(--color-orange);}

/* ************ common objects ************ */
/* button */
[class*="btn_"]{display:inline-block; box-sizing: border-box; border-radius: 4px; vertical-align: bottom; text-align: center;}
[class*="btn_"]:focus{box-shadow: 0px 0px 6px 0px rgba(0,0,0,1);}
*:focus + label[class*="btn_"]{box-shadow: 0px 0px 6px 0px rgba(0,0,0,1);}
[class*="btn_s"]		{width: 80px; 	height: 28px; font-size: var(--font-size-txtS); font-weight: 400; line-height: 28px;}
[class*="btn_l"]		{width: 120px; 	height: 34px; font-size: var(--font-size-txt); font-weight: 600; line-height: 34px;}
[class*="btn_xl"]		{width: 185px; 	height: 50px; font-size: var(--font-size-txtL); font-weight: 600; line-height: 50px;}
[class*="btn_"].colOrange				{background: var(--color-orange); color: #fff;}
[class*="btn_"].colOrange:hover			{background: var(--color-orange-over);}
[class*="btn_"].colGreen				{background: var(--color-green); color: #fff;}
[class*="btn_"].colGreen:hover			{background: var(--color-green-over);}
[class*="btn_"].colBlue					{background: var(--color-blue); color: #fff;}
[class*="btn_"].colBlue:hover			{background: var(--color-blue-over);}
[class*="btn_"].colRed					{background: var(--color-red); color: #fff;}
[class*="btn_"].colRed:hover			{background: var(--color-red-over);}
[class*="btn_"].colGray					{background: var(--color-gray); color: #fff;}
[class*="btn_"].colGray:hover			{background: var(--color-gray-over);}
[class*="btn_"].colDarkGray				{background: var(--color-darkgray); color: #fff;}
[class*="btn_"].colDarkGray:hover		{background: var(--color-darkgray-over);}
[class*="btn_"].basic					{background: #fff; border: 1px solid var(--colorGrayscale-D05); color: var(--colorGrayscale-D01);}
[class*="btn_"].basic:hover				{background:var(--colorGrayscale-L01);}
[class*="btn_"][class*="col"].disable	{background: var(--colorGrayscale-D06); color: var(--colorGrayscale-L02);}
[class*="btn_"].basic.disable			{background: var(--colorGrayscale-L01); border-color:var(--colorGrayscale-L03); color: var(--colorGrayscale-D06);}
[class*="btn_"].wide					{width: auto; padding: 0 10px;}
.btn_xl.wide							{width: auto; padding: 0 25px;}

.btnSet{margin-bottom: 30px;display: flex; justify-content: space-between; align-items: center;}
.btnSet [class*="btn_"]{width: 100px;}
.btnSet .setL [class*="btn_"]{margin-right: 6px;}
.btnSet .setR [class*="btn_"]{margin-left: 6px;}

/* input - check box, radio */
.btnSet input[type="checkbox"], input[type="radio"] {display: block; width: 0px; height: 0px; transition:none;}
.btnSet input[type="checkbox"] + label, input[type="radio"] + label {display: inline-block; color: var(--colorGrayscale-D02); font-size: var(--font-size-txtS); font-weight: 400;}
.btnSet .st input[type="checkbox"] + label, .st input[type="radio"] + label {color: var(--colorGrayscale-D01); font-size: var(--font-size-txt); font-weight: 600;}
.btnSet input[type="checkbox"] + label span, input[type="radio"] + label span {display: inline-block; width: 18px; height: 18px; margin-right: 4px; background: #fff; border: 2px solid var(--color-red-light); border-radius: 3px; vertical-align: -3px; transition:all 0.2s ease;}
.btnSet input[type="checkbox"]:hover + label span, input[type="radio"]:hover + label span, 
.btnSet input[type="checkbox"]:focus + label span, input[type="radio"]:focus + label span {border: 2px solid var(--color-red)}
.btnSet input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {position: relative; border: none; background: var(--color-red);}
.btnSet input[type="checkbox"]:checked + label span:before {content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 4px; border: 1px solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); transition:all 0.2s ease;}
.btnSet input[type="radio"] + label span {border-radius: 9px; }
.btnSet input[type="radio"]:checked + label span:before {content: ''; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; background: #fff; border-radius: 3px; transition:all 0.2s ease;}


.summary_error { color: #ed5565; font-weight: bold; }

/*Login*/
.wrap.login { background-color: #f6f6f6; min-height: 100%; min-width: 1000px; position: relative;}

.login-box {
    width: 550px;
    height: 210px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -225px;
}
.login-box .top { margin-bottom: 15px; }
.login-box .top img { vertical-align: middle; margin-right: 50px; }
.login-box .top strong { font-size: 22px; color: #202020; }

    .login-box form {
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 3px 0 10px rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
        padding-right: 220px;
    }

        .login-box form .row {
            position: relative;
            background: #f3f3f3;
            border: 1px solid #d3dcd8;
            padding-left: 63px;
            height: 45px;
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
            margin-right: 0;
            margin-left: 0;
        }

            .login-box form .row label {
                background: #787878 url("/Content/images/icon_id.gif") no-repeat center;
                width: 63px;
                height: 45px;
                position: absolute;
                left: -1px;
                top: -1px;
                font-size: 0;
            }

            .login-box form .row input {
                background: transparent;
                border: 0;
                height: 45px;
                line-height: 45px;
                color: #707070;
                font-size: 16px;
                padding: 0 10px;
                box-sizing: border-box;
            }

        .login-box form .pw_row label {
            background: #787878 url("/Content/images/icon_pw.gif") no-repeat center;
        }

        .login-box form .login_btn {
            cursor: pointer;
            height: 100px;
            background: #469b74;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            border: 0;
            width: 190px;
            border-radius: 5px;
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .login-box .sso_btn {
            cursor: pointer;
            height: 40px;
            background: #004C98;
            color: #fff;
            text-align: center;
            font-size: 16px;
            border: 0;
            width: 190px;
            border-radius: 5px;
        }