/*
 --------------------------------------------------------------------------------------------------
 * Common stylesheet design Version 2.1
 --------------------------------------------------------------------------------------------------
 -- Author        : Arius Vietnam JSC
 -- Date        : 2013/08/12
 -- Description    : Common style design for all web pages.
 -- Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 -- History        :
 -- -- --- ------------ --------------- -----------------------------------------------------------
 -- -- No    Date         Author          Description
 -- -- --- ------------ --------------- -----------------------------------------------------------
 -- --   1 2013/08/12   Phong D. Nguyen    New stylesheet
 --------------------------------------------------------------------------------------------------
 */

html,
body {
    margin: 0;
    padding: 0;

    font-family: "Montserrat";
    font-size: 13px;
    color: #45484D;
}

* {
    color: #45484D;
    scrollbar-width: thin;
    scrollbar-color: #dddddd #ffffff;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 15px;
}
*::-webkit-scrollbar-track {
    background: #ffffff;
}
*::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 20px;
    border: 3px solid #ffffff;
}


/**************************************************************************************************
 * DESIGN-RELATED STYLESHEET SNIPPETS
 *************************************************************************************************/
:focus {outline:none;}
::-moz-focus-inner {border:0;}

::selection { background: #BA9EB0; color: #FFFFFF;}
::-moz-selection { background: #BA9EB0; color: #FFFFFF;}
::-webkit-selection { background: #BA9EB0; color: #FFFFFF;}

/* TABLE STYLE */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    background-repeat: no-repeat;
}

.table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
}

.table tr th {
    background-color: #0A1A5C;
    border: 1px solid #023e8a;
    margin: 0;
    padding: 3px 0;
    color: #FFFFFF;
    /* text-transform: uppercase; */
    text-align: center;
    vertical-align: middle;
}

.table tr th i {
    color: #FFFFFF;
}

.table tr td {
    border: 1px solid #D5D6D1;
    box-shadow: 0 0 0 1px #FFFFFF inset;
    -moz-box-shadow: 0 0 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
    margin: 0;
    padding: 3px 5px 3px 10px;
    cursor: pointer;
    vertical-align: middle;
}

.table tbody tr:nth-child(odd) td {
    background-color: #FAFAFA;
}

.table tbody tr:hover td {
    background-color: #E9E9E9;
}

.table.table-input tr th {
    background-color: #FAF7F0;
    border: 1px solid #D5D6D1;
    padding-left: 10px;
    text-align: left;
    color: #45484D;
}

.table.table-input tr th .required {
    color: #FF0000;
}

/* LINK STYLE */
a, a:hover {
    text-decoration: none;
}

/* LIST STYLE */
ul, ol {
    list-style: none;
}

/* TEXT INPUT STYLE */
input[type=checkbox] {
    transform: scale(2.0);
}

.form-check-input {
    margin-left: 20px;
    margin-top: 0.25rem;
    position: unset;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"] {
    background-color: #FFFFFF;
    border: 1px solid #D8D9DA;
    border-radius: 3px;
    margin: 0;
    padding: 4px 6px !important;
    transition: border 0.2s linear 0s;
    color: #575655;
    font-family: 'OpenSansRegular', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    height: calc(1.327em + 0.75rem + 2px) !important;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
    background-color: #FFFFFF;
    border-color: #C1C1C1;
    box-shadow: none;
}

select:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {
    background-color: #EBEBEB;
}

textarea {
    resize: none;
}

select {
    padding: 3px 6px;
}


/* BUTTON STYLE */
input[type="button"],
input[type="submit"] {
    background-color: #087CA7;
    border: 1px solid #087CA7;
    border-radius: 3px;
    margin: 0;
    padding: 4px 10px;
    color: #FFFFFF;
    cursor: pointer;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: #087CA7;
}

input[type="button"]:active,
input[type="submit"]:active {
    background-color: #0090C1;
}

input[type="button"]:disabled,
input[type="submit"]:disabled {
    background-color: #CCCCCC !important;
    border: 1px solid #ECECEC !important;
    color: #222222 !important;
}

.button, .button:visited {
    background-color: #222222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    position: relative;
    display: inline-block;
    margin-top: -3px;
    padding: 5px 10px 4px;
    padding: 4px 10px\9;    /* IE 8 */
    *padding: 4px 10px;        /* IE 7 */
    _padding: 4px 10px;        /* IE 6 */
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 12px
}

button {
    box-shadow: none !important;
}

button:active {
    outline: 0 !important;
    box-shadow: none !important;
}

button:focus {
    outline: 0 !important;
    box-shadow: none !important;
}


button.btn-rounded {
    border-radius: 50px;
    padding: 7px 9px;
    line-height: 1em;
}

button.btn-new {
    background-color: #38B000;
    border: 1px solid #38B000;
}
button.btn-new i {
    color: #FFFFFF;
}

button.btn-new:hover {
    background-color: #FFA87D;
    border: 1px solid #FFA87D;
}

button.btn-s3m {
    background-color: #0A1A5C;
    border: 1px solid #0A1A5C;
    width: 40px;
    color: #FFFFFF;
}
button.btn-s3m:hover {
    background-color: #FFA87D;
    border: 1px solid #FFA87D;
}
button.btn-s3m i {
    color: #FFFFFF;
}

button.btn-agree {
    background-color: #38B000;
    border: 1px solid #38B000;
    width: 40px;
    color: #FFFFFF;
}
button.btn-agree:hover {
    background-color: #008000;
    border: 1px solid #008000;
}
button.btn-agree i {
    color: #FFFFFF;
}

button.btn-cancel {
    background-color: #9999A1;
    border: 1px solid #9999A1;
    width: 40px;
}
button.btn-cancel:hover {
    background-color: #66666E;
    border: 1px solid #66666E;
}
button.btn-cancel i {
    color: #FFFFFF;
}


.icon {
    height: 18px !important;
    vertical-align: middle;
}

/* BACKGROUND COLOR MODE */
.transparent {background-color: transparent !important; }
.white { background-color: #FFFFFF !important; }

.red { background-color: #E62727 !important; }
.red:hover { background-color: #CF2525 !important; }
.red:active { background-color: #E62727 !important; }

.blue { background-color: #009DD5 !important; }
.blue:hover { background-color: #00A7E4 !important; }
.blue:active { background-color: #009DD5 !important; }

.green { background-color: #00B386 !important; }
.green:hover { background-color: #00CC96 !important; }
.green:active { background-color: #00B386 !important; }

.orange { background-color: #FFCF25 !important; }
.orange:hover { background-color: #FF5C00 !important; }
.orange:active { background-color: #E33100 !important; }

.coban { background-color: #00A0B1 !important; }
.coban:hover { background-color: #009DD5 !important; }
.coban:active { background-color: #009DD5 !important; }

.yellow { background-color: #FBDE09 !important; }
.yellow:hover { background-color: #DAAE45 !important; }
.yellow:active { background-color: #DAAE45 !important; }

.light-blue { background-color: #AAD4FF !important; }
.light-blue:hover { background-color: #55D4FF !important; }
.light-blue:active { background-color: #55D4FF !important; }

.white { background-color: #FFFFFF !important; }

.gray { background-color: #8F857D !important; }
.gray:hover { background-color: #808a8e !important; }
.gray:active { background-color: #808a8e !important; }

.flax { background-color: #E0D688 !important; }
.flax:hover { background-color: #dfd6a7 !important; }
.flax:active { background-color: #dfd6a7 !important; }

.pearl-aqua { background-color: #8eccc0 !important; }
.pearl-aqua:hover { background-color: #6bb2a5 !important; }
.pearl-aqua:active { background-color: #6bb2a5 !important; }

.bright-cerulean { background-color: #23b4e1 !important; }
.bright-cerulean:hover { background-color: #15A0D6 !important; }
.bright-cerulean:active { background-color: #15A0D6 !important; }

.spainish-gray { background-color: #94a89a !important; }
.spainish-gray:hover { background-color: #9cb380 !important; }
.spainish-gray:active { background-color: #9cb380 !important; }

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace; /* Display text as programming source code */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table !important;
}

.clearfix:after {
    clear: both !important;
}

/* IE6/7 Support */
.clearfix {
    *zoom: 1 !important;
}




/**************************************************************************************************
 * SHORTHAND STYLESHEET CLASSES
 *************************************************************************************************/

.hide {
    display: none;
}

.show {
    display: block;
}

.inline {
    display: inline-block;
}

.vtop {
    vertical-align: top;
}

.vcenter {
    vertical-align: middle;
}

.vbottom {
    vertical-align: bottom;
}

.transparent {
    filter: alpha(opacity=50);    /* Internet Explorer */
    -khtml-opacity: 0.5;        /* KHTML, Old Safari */
    -moz-opacity: 0.5;            /* Mozilla, Netscape */
    opacity: 0.5;                /* FX, Safari, Opera */
}

.wrap {
    whitewhite-space: pre-wrap;            /* css-3 */
    whitewhite-space: -moz-pre-wrap;    /* Mozilla, since 1999 */
    whitewhite-space: -pre-wrap;        /* Opera 4-6 */
    whitewhite-space: -o-pre-wrap;        /* Opera 7 */
    word-wrap: break-word;                /* Internet Explorer 5.5+ */
}

.break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;    /* Non standard for webkit */

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.no-border {
    border: none !important;
}

.no-background {
    background: transparent !important;
}

.no-overflow {
    overflow: hidden;
}

.white-text {
    color: #FFFFFF;
}


.w-10px {
    width: 10px !important;
}

.w-20px {
    width: 20px !important;
}

.w-30px {
    width: 30px !important;
}

.w-40px {
    width: 40px !important;
}

.w-50px {
    width: 50px !important;
}

.w-60px {
    width: 60px !important;
}

.w-70px {
    width: 70px !important;
}

.w-80px {
    width: 80px !important;
}

.w-90px {
    width: 90px !important;
}

.w-100px {
    width: 100px !important;
}

.w-110px {
    width: 110px !important;
}

.w-120px {
    width: 120px !important;
}

.w-130px {
    width: 130px !important;
}

.w-140px {
    width: 140px !important;
}

.w-150px {
    width: 150px !important;
}

.w-200px {
    width: 200px !important;
}

.w-250px {
    width: 250px !important;
}

.w-300px {
    width: 300px !important;
}