.bg-gray {
    border: 1px solid gray !important;
    background-color: #fff !important;
    color: gray !important;
}
.clr-white {
    color: #fff;
}
.clr-gray {
    color: #929394;
}
.clr-facebook {
    color: #4267b2;
}

a {
    color: black;
    outline: 0;
}

button.flat {
    /*border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;*/
    border: 1px solid #ced4da;
    outline: none;
    background-color: #f5f6f7 !important;
}
button.flat:hover {
    border-left: 1px solid #ced4da;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    outline: none;
    background-color: #f5f6f7 !important;
}

a:hover,
a:active,
a:focus {
    color: black;
    text-decoration: none;
    outline: none;
}

li:focus {
    outline: none;
}

input::-moz-focus-inner {
    border: 0;
}

hr {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    color: #ededed;
}
.seperate {
    margin-top: 10px;
    margin-bottom: 10px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.text-shadow {
    text-shadow: 1px 1px #fff;
}

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

.shadow-all  {
    -webkit-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.3);
}
.shadow-right {
    -webkit-box-shadow: 2px 0 10px -2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 0 10px -2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 0 10px -2px rgba(0, 0, 0, 0.3);
}
.padding-0 {
    padding: 0px !important;
}
.padding {
    padding: 20px !important;
}
.padding-10 {
    padding: 10px !important;
}
.padding-5 {
    padding: 5px !important;
}

.padding-top-0 {
    padding-top: 0px !important;
}
.padding-top-10 {
    padding-top: 10px;
}
.padding-left-10 {
    padding-left: 10px;
}
.padding-right-3 {
    padding-right: 3px !important;
}
.padding-right-10 {
    padding-right: 10px;
}
.padding-bottom-10 {
    padding-bottom: 10px;
}
.padding-bottom-5 {
    padding-bottom: 5px;
}
.padding-bottom-0 {
    padding-bottom: 0px !important;
}

.margin-0 {
    margin: 0px;
}
.margin-10 {
    margin: 10px;
}
.margin-20 {
    margin: 20px;
}
.margin-top-0 {
    margin-top: 0px;
}
.margin-bottom-0 {
    margin-bottom: 0px;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-top-5 {
    margin-top: 5px;
}
.margin-top-10 {
    margin-top: 10px;
}
.margin-left-5 {
    margin-left: 5px;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-left-20 {
    margin-left: 20px;
}
.margin-right-10 {
    margin-right: 10px;
}
.margin-right-20 {
    margin-right: 20px;
}
.margin-right-30 {
    margin-right: 30px;
}
.margin-right-50 {
    margin-right: 50px;
}
.margin-right-5 {
    margin-right: 5px;
}

.float-left {
    float: left;
}
label {
    height: 23px;
    line-height:23px;
    margin: auto auto;
}
label.checkbox {
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 5px;
    display: inline;
    background-color: #fff;
}
label.checkbox > input[type=checkbox] {
    position: absolute;
}
label.checkbox > input[type=radio] {
    position: absolute; 
}
label.checkbox > text {
    margin-left: 15px;
}

input {
    border: 1px solid #ced4da;
    border-radius: 3px;
    height: 23px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #fff !important;
}
textarea {
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding-left: 4px;
    padding-right: 4px;
}
input:focus, select:focus, textarea:focus {
    border: 1px dashed gray !important;
    outline:none;
}
input:read-only {
    background-color: #f5f6f7 !important;
}
input:-moz-read-only {
    background-color: #f5f6f7 !important;
}
input:disabled {
    background-color: transparent !important;
}
textarea:disabled {
    background-color: #f5f6f7 !important;
}
input[type=button] {
    cursor:pointer;
}

select {
    border: 1px solid #ced4da;
    border-radius: 3px;
    height: 23px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #fff !important;
}

button {
    height: 23px !important;
}
button:hover {
    cursor:pointer;
}
button:disabled {
    color: darkgray !important;
}
button:disabled * {
    color : darkgray !important;
}
#Keyword {
    width:145px;
}
.voucher-no-item {
    width: 100%;
}
.voucher-no-item::-moz-selection {
    background: transparent;
}

.voucher-no-item::selection {
    background: transparent;
}
.loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/images/processing.gif) center center no-repeat !important;
    z-index: 1000;
}
.loading-report {
    background: url(/images/processing.gif) center center no-repeat !important;
}
.choose-code {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    position: absolute;
    display: inline-block;
    height: 23px;
    width: 83px;
    float: left;
}
.choose-name {
    border-radius: 0px !important;
    width: calc(100% - 83px - 23px);
    display: inline-block;
    float: left;
    margin-left:83px;
}
.choose-box {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    width: calc(100% - 23px);
    display: inline-block;
    float: left;
}
.choose-button {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: 23px;
    width: 23px;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.choose-alias-code {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    position: absolute;
    display: inline-block;
    height: 23px;
    width: 100px;
    float: left;
}
.choose-alias-name {
    border-radius: 0px !important;
    width: calc(100% - 100px - 23px);
    display: inline-block;
    float: left;
    margin-left: 100px;
}
.choose-alias-value {
    border-radius: 0px !important;
    width: calc(100% - 100px - 150px - 23px);
    display: inline-block;
    float: left;
    /*margin-left: 66px;*/
}

.datetime-caption {
    display: inline-block;
    float: left;
    margin-right:10px;
}
.datetime-box {
    width: 130px;
    display: inline-block;
    float: left;
}
.datetime-date {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    width: calc(100% - 47px);
    display: inline-block;
    float: left;
    text-align: center;
}
.datetime-time {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    width: 47px;
    display: inline-block;
    float: left;
    text-align: center;
}

.panel-box {
    border-top: 2px solid #d8d8d8;
    border-left: 2px solid #d8d8d8;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding: 10px;
}

.logo-band {
    position: absolute;
    bottom: 120px;
    width: 100%;
    cursor: pointer;
}

.login {
    margin: auto auto;
    margin-top: 100px;
    border: 3px solid #447cfa;
    width: 500px;
    border-radius: 3px;
    box-shadow:3px;
}

.login .title {
    padding: 5px;
    background-color: #447cfa;
}

.decimal {
    text-align: right !important;
}

.numeric {
    text-align: right !important;
}

.period {
    border-right: none;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    display: inline-block;
    float: left;
    width: 75px;
}

.date {
    border-left: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    width: 70px;
    display: inline-block;
    float: left;
    text-align: center;
}
.from-date {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
    width: 70px;
    display: inline-block;
    float: left;
    text-align: center;
}

.to-date-caption {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
    width: 15px;
    padding:0px;
    display: inline-block;
    float: left;
    text-align: center;
}
.year-caption {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
    width: 10px;
    padding: 0px;
    display: inline-block;
    float: left;
    text-align: center;
}
.to-date-caption:read-only, .year-caption:read-only {
    background-color: #fff !important;
}
.to-date {
    border-left: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    width: 70px;
    display: inline-block;
    float: left;
    text-align: center;
}
.month {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
    width: 45px;
    display: inline-block;
    float: left;
    text-align: right;
}

.quarter {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
    width: 45px;
    display: inline-block;
    float: left;
    text-align: right;
}
.year {
    border-left: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    width: 60px;
    display: inline-block;
    float: left;
    text-align: center;
}

.TextBigFontSize {
    height: 43px !important;
}
.BigFontSize {
    font-size: 33px !important;
}

.TextMidiumFontSize {
    height: 43px !important;
}

.MidiumFontSize {
    font-size: 20px !important;
}

label.guide {
    color: blue;
    cursor:pointer;
}