/*--------------------------------------------------------------
# Set Custom Tag Property
--------------------------------------------------------------*/
legend {
  line-height: 0;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Custom  Useful Class
--------------------------------------------------------------*/
.td-none {
  text-decoration: none;
}
.no-padding {
  padding: 0px; 
}
.no-margin {
  margin: 0px; 
}
.hide {
  display: none; 
}
.show {
  display: block;
}
.horizontal-scrollable {
  overflow: auto;
  white-space: nowrap;
}
.vertical-scrollable {
  overflow-y: scroll;
}
.Receipt {
 background-color: #E8F6F3 !important;
  color: #008000 !important;
}
.Payment {
 background-color: #FDEDEC !important;
  color: #FF0000 !important;
}
.text-receipt {
  color: #008000 !important;
}
.text-payment {
  color: #FF0000 !important;
}

/*--------------------------------------------------------------
# Custom Text Color
--------------------------------------------------------------*/
.text-navy {
  color: #000080 !important;
}
.text-teal {
  color: #008080 !important;
}
.text-maroon {
  color: #800000 !important;
}
.text-indigo {
  color: #4b0082 !important;
}
.text-tomato {
  color: #ff6347 !important;
}

/*--------------------------------------------------------------
# Custom Background Color
--------------------------------------------------------------*/
.bg-navy {
  background-color: #000080 !important;
}
.bg-teal {
  background-color: #008080 !important;
}
.bg-maroon {
  background-color: #800000 !important;
}
.bg-indigo {
  background-color: #4b0082 !important;
}
.bg-tomato {
  background-color: #ff6347 !important;
}
.bg-light-red {
  background-color: #ffcfcf !important;
}

/*--------------------------------------------------------------
# Custom Button
--------------------------------------------------------------*/
/* Custom styles for indigo button (Bootstrap) */
.btn-indigo {
    color: #fff;
    background-color: #6610f2;
    border-color: #6610f2;
}
.btn-indigo:hover {
    color: #fff;
    background-color: #560df2;
    border-color: #560df2;
}
.btn-check:focus + .btn-indigo, .btn-indigo:focus {
    color: #fff;
    background-color: #560df2;
    border-color: #560df2;
    box-shadow: 0 0 0 0.25rem rgba(86, 13, 242, 0.5);
}
.btn-check:checked + .btn-indigo, .btn-check:active + .btn-indigo, .btn-indigo:active, .btn-indigo.active, .show > .btn-indigo.dropdown-toggle {
    color: #fff;
    background-color: #4e09e2;
    border-color: #4e09e2;
}
.btn-check:checked + .btn-indigo:focus, .btn-check:active + .btn-indigo:focus, .btn-indigo:active:focus, .btn-indigo.active:focus, .show > .btn-indigo.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(86, 13, 242, 0.5);
}
.btn-indigo:disabled, .btn-indigo.disabled {
    color: #fff;
    background-color: #6610f2;
    border-color: #6610f2;
}

/* Custom styles for tomato button (bootstrap) */
.btn-tomato {
    color: #fff;
    background-color: #ff6347; /* Tomato color */
    border-color: #ff6347; /* Tomato color */
}
.btn-tomato:hover {
    color: #fff;
    background-color: #ff4500; /* Darker shade of tomato color */
    border-color: #ff4500; /* Darker shade of tomato color */
}
.btn-check:focus + .btn-tomato, .btn-tomato:focus {
    color: #fff;
    background-color: #ff4500; /* Darker shade of tomato color */
    border-color: #ff4500; /* Darker shade of tomato color */
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.5); /* Darker shade of tomato color */
}
.btn-check:checked + .btn-tomato, .btn-check:active + .btn-tomato, .btn-tomato:active, .btn-tomato.active, .show > .btn-tomato.dropdown-toggle {
    color: #fff;
    background-color: #d14836; /* Darker shade of tomato color */
    border-color: #d14836; /* Darker shade of tomato color */
}
.btn-check:checked + .btn-tomato:focus, .btn-check:active + .btn-tomato:focus, .btn-tomato:active:focus, .btn-tomato.active:focus, .show > .btn-tomato.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.5); /* Darker shade of tomato color */
}
.btn-tomato:disabled, .btn-tomato.disabled {
    color: #fff;
    background-color: #ff6347; /* Tomato color */
    border-color: #ff6347; /* Tomato color */
}
/*--------------------------------------------------------------
# Custom Form
--------------------------------------------------------------*/
form .error, .help-inline-error {
  color: red;
  font-size: 0.8em;
  width:  100%;
}

::placeholder {
  color: #747f8a !important;
  font-size: 13px;
  opacity: .8 !important; 
}
input, input::-webkit-input-placeholder {
  font-size: 17px;
  line-height: 3; 
}

/* indigo-form  */
.indigo-form .form-control:focus {
  box-shadow: none;
  border-color: #4B0082 !important;
}
.indigo-form .form-select:focus {
  box-shadow: none;
  border-color: #4B0082 !important;
}
.indigo-form .input-group .input-group-text {
  background-color: #FFF;
  border-right: 0px; 
}
.indigo-form .input-group .input-group-text i {
  font-size: 13px; 
}
.indigo-form .form-label {
    font-size: 11px
}

/*--------------------------------------------------------------
# Cursor
--------------------------------------------------------------*/
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

/*--------------------------------------------------------------
# Card Radio Input
--------------------------------------------------------------*/
.card-radio label {
    width: 100%;
}

.card-input-element {
    display: none;
}

.card-input {
    margin: 10px;
    padding: 0px;
}

.card-input:hover {
    cursor: pointer;
}

.card-input-element:checked + .card-input {
    box-sizing: border-box;
    box-shadow: 0 0 2px 2px #FA0C25;
}
/*--------------------------------------------------------------
# Data Table
--------------------------------------------------------------*/
table, th, td {
/*  border: .5px solid Silver;*/
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table tr {
  vertical-align: middle;
}
.table tbody tr:nth-child(even) {
  color: #000000;
  background-color: #FFFFFF;
}
.table tbody tr:nth-child(odd) {
  color: #000000;
  background-color: #F7F9F9;
}
.table tbody tr:hover {
  background-color: #D4F1E8;
}
.table-border-left {
  border-left: .5px solid Silver;
}
.table-border-right {
  border-right: .5px solid Silver;
}
.table-border-top {
  border-top: .5px solid Silver;
}
.table-border-bottom {
  border-bottom: .5px solid Silver;
}.table-border {
  border: .5px solid Silver;
}
td.wrap-column,
th.wrap-column {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}