/* position */
/* line-height */
/* FONT */
/* DISPLAY */
/* FLEX */
/* BORDER */
/* TEXT */
/* COLOR */
/* INPUT */
/* width */
/* HEIGHT */
/* table */
/* float */
/* MARGIN */
/* padding */
/* min width */
/* BTN */


* {
    margin: 0px;
    padding: 0px;
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFF;
    text-align: center;
    overflow: hidden;
    font-size: 16px;
    color: #000;
    height: 100%;
    width: 100%;
    position: relative;
}

a {
    text-decoration: none;
    color: #000;
}


/* position */

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}


/* line-height */

.line-height-19 {
    line-height: 19px;
}

.line-height-20 {
    line-height: 20px;
}

.line-height-21 {
    line-height: 21px;
}


/* FONT */

.font-11 {
    font-size: 11px;
}

.font-12 {
    font-size: 12px;
}

.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}

.font-15 {
    font-size: 15px;
}

.font-16 {
    font-size: 16px;
}

.font-17 {
    font-size: 17px;
}

.font-18 {
    font-size: 18px;
}

.font-bold {
    font-weight: bold;
}


/* DISPLAY */

.display-ib {
    display: inline-block;
}

.display-block {
    display: block;
}

.display-none {
    display: none;
}

.display-flex {
    display: flex;
}


/* FLEX */

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.content-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.flex-20p {
    flex: 20%;
}

.flex-25p {
    flex: 25%;
}

.flex-30p {
    flex: 30%;
}

.flex-33p {
    flex: 33%;
}

.flex-40p {
    flex: 40%;
}

.flex-45p {
    flex: 45%;
}

.flex-50p {
    flex: 50%;
}

.flex-55p {
    flex: 55%;
}

.flex-60p {
    flex: 60%;
}

.flex-70p {
    flex: 70%;
}


/* BORDER */

.bdr-1s-777 {
    border: 1px solid #777;
}

.bdr-1s-888 {
    border: 1px solid #888;
}

.bdr-1s-999 {
    border: 1px solid #999;
}

.bdr-1s-AAA {
    border: 1px solid #AAA;
}

.bdr-1s-BBB {
    border: 1px solid #BBB;
}

.bdr-1s-CCC {
    border: 1px solid #AAA;
}

.bdr-1s-DDD {
    border: 1px solid #DDD;
}

.bdr-1s-EEE {
    border: 1px solid #EEE;
}

.bdr-1sg {
    border: 1px solid #999;
}

.bdr-1sb {
    border: 1px solid #00F;
}

.bdr-1sr {
    border: 1px solid #F00;
}

.bdr-right-1s-CCC {
    border-right: 1px solid #CCC;
}

.bdr-right-1s-EEE {
    border-right: 1px solid #EEE;
}

.bdr-bottom-1s-999 {
    border-bottom: 1px solid #999;
}

.bdr-bottom-1s-EEE {
    border-bottom: 1px solid #EEE;
}

.bdr-radius-3 {
    border-radius: 3px;
}

.bdr-radius-5px {
    border-radius: 5px;
}

.bdr-radius-7px {
    border-radius: 7px;
}

.bdr-radius-50p {
    border-radius: 50%;
}

.bdr-rad-15 {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.bdr-1s-ccc {
    border: 1px solid #CCC;
}

.br-10 {
    border-radius: 10px;
}


/* cursor */

.cursor-pointer {
    cursor: pointer;
}


/* TEXT */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* COLOR */

.color-white {
    color: white;
}

.color-777 {
    color: #777;
}

.color-888 {
    color: #888;
}

.color-999 {
    color: #999;
}

.color-grey {
    color: #999;
}

.color-black {
    color: #000000;
}

.color-dark-blue {
    color: #001296;
}


/* background-color */

.bg-color-FFF {
    background-color: #FFF;
}

.bg-color-999 {
    background-color: #999;
}

.bg-color-000 {
    background-color: #000;
}


/* INPUT */

input[type="text"] {
    height: 20px;
    padding: 3px;
}

input[type="password"] {
    height: 20px;
    padding: 3px;
}


/* width */

.width-95p {
    width: 95%;
}

.width-100p {
    width: 100%;
}

.width-150 {
    width: 150px;
}

.width-170 {
    width: 170px;
}

.width-200 {
    width: 200px;
}

.width-230 {
    width: 230px;
}


/* HEIGHT */

.height-100p {
    height: 100%;
}

.min-height-40 {
    min-height: 40px;
}


/* table */

.table-align-top {
    vertical-align:top;
}


/* float */

.float-left {
    float: left;
}


/* MARGIN */

.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.mt-2 {
    margin-top: 2px;
}

.mt-3 {
    margin-top: 5px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-70 {
    margin-top: 70px;
}

.ml-5 {
    margin-left: 5px;
}

.mr-5 {
    margin-right: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 150px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-10 {
    margin-right: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.my-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}


/* padding */

.p-5 {
    padding: 5px;
}

.pt-5 {
    padding-top: 5px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pl-5 {
    padding-left: 5px;
}

.pr-5 {
    padding-right: 5px;
}

.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.p-40 {
    padding: 40px;
}

.p-10 {
    padding: 10px;
}

.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* min width */

.min-width-150 {
    min-width: 150px;
}


/* BTN */

.btn-grey {
    border: 1px solid #f2f4f6;
    background: #f2f4f6;
    color: #778ca2;
}

.btn-blue {
    border: 1px solid #001296;
    background: #001296;
    color: #FFF;
}

.btn-2 {
    min-width: 120px;
    height: 45px;
    /* padding: 10px; */
    border: none;
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
}

/* .btn-2 {
    min-width: 120px;
    padding: 10px;
    border: none;
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
} */

/* MODAL */

select {
    background-color: #FFF;
    border: 1px solid #999;
    width: 100%;
    height: 40px;
    padding: 3px;
    border-radius: 2px;
}

.alert {
    border-radius: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.alert-success {
    border: 1px solid #00F;
    background-color: #9ecbfa;
}

.alert-danger {
    border: 1px solid #F00;
    background-color: #fa9c9c;
}