body{
  animation: fadein 0.5s ease-in;
}

.btn{
  margin: 0 3px 3px 0;
  box-shadow: 3px 2px 1px #888;
}
.hide {display: none}

#content {padding: 0px}

img.icon{
  width: 24px !important;
  height: auto !important;
}
img.mini{
  width: 12px !important;
  height: auto !important;
}
.nav-link[data-bs-toggle] > img {width: 20px; height: auto;}
.btn img {width: 24px; height: auto;}


.title-page{color: darkblue}
.title-page img {width: 48px; height: auto;}
.title-sub{
  font-size: medium;
  font-weight: normal;
}
.deleted {color: indianred}

.button-zone{
  background-color:#c0cde1;
  padding: 5px;
}
.button-zone button {margin-right: 7px}

span.error-input {padding: 0 10px; font-size: smaller}

a.no-deco{
  color: inherit;
  text-decoration: none;
}

pre {font-family: inherit}

input[type="radio"] {
  margin-right: 0;
  margin-left: 15px
}

/* like table-striped */
div.striped:nth-of-type(odd) {background: #e0e0e0}
div.striped:nth-of-type(even) {background: #FFFFFF}

.font-sm {font-size: smaller}

.relief{
  margin: 20px 10px;
  box-shadow: -10px -10px 5px gray;
  border: 1px solid black
}

.datepicker{box-shadow: 10px 10px 8px #888888}

/*** menu ***/
nav.menu-main{
  background: linear-gradient(180deg, #784DB0, #352640);
  box-shadow: 0 7px 25px -7px black;
  margin-bottom: 0px;
}
.menu-main .dropdown-menu{
  background-color: #784DB0;
  box-shadow: 0 7px 25px -7px black;
}
a.dropdown-item{
  color: white;
  padding: 3px 0.5rem;
}
.dropdown .nav-link {color: lightgray}

/*** tabs ***/
.nav-tabs .nav-link{
  color: black;
  background-color:#ddd;
  border-radius: 15px 15px 0 0;
  margin-bottom: -2px;    /* otherwise thin but ugly blank line */
}
.nav-tabs .nav-link.active{
  color: black;
  background-color:#c0cde1;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -7px 10px -7px black;
}


/*** modal ***/
.modal{text-align: center}
.modal-dialog{
  text-align: left;
  width: auto !important;
  display: inline-block;
}
.modal-header {background-color: #ddd}
.modal-body{
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.modal-footer img{
  width: 32px;
  height: auto;
}


/*** form ***/
::placeholder {font-size: x-small}

textarea, input[type] {
  background-color: white;
  border-radius: .375rem;
  border: 1px solid #ced4da;
}

input, select, textare a{color: #495057;}
input:disabled, select:disabled, textarea:disabled {background-color: lightgrey;}
input:focus, select:focus, textarea:focus{
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}

textarea {width:90%}

@media screen and (min-width: 1024px){.col-form-label{text-align: right}}
label.required {font-weight: 700;}
.form-group{margin-bottom: 0.25rem;}
select {
  height: 2rem;
  padding-right: 10px;
}
.is-invalid {border-color: #dc3545;}

div.form-separation{
  background-color: #999;
  color: white;
  font-weight: bold;
  padding: 5px;
}
input[type=checkbox] {margin: 0 0 0 15px;}
input[type=radio] {margin-right: 0 0 0 15px;}
.banner-frame {border: 1px solid #0c5460; padding: 2px 5px}


/*** list ***/
#data-content{border: 1px solid dimgray}

.list-search{
  background-color:#c0cde1;
  padding: 5px;
}

.list-footer{
  background-color:#dddddd;
  min-height: 28px;
  padding: 0 5px;
}

.pins{
  border-radius: 15px 15px;
  background: #ddd;
  padding: 0 5px;
  font-size: small;
}


/*** table ***/
.table {margin-bottom: 0}
.table-small {margin-bottom: 0}
.table-small th {padding: 0px 10px}

.table th.img_order {margin-left: 5px }
.table th{
  background-color:#ddd;
  cursor: pointer;
  padding: 5px;
}
.table th.no-sort {cursor: default}
.table tr.current {font-weight: bold}
.table td{
  padding: 0 5px !important;
  vertical-align: middle !important;
  text-overflow: ellipsis;
}
.col-btn {width: 60px}

.row-alternate:nth-child(even) {background-color: #f2f2f2;}

.cell-num{
  width: 100%;
  border: 1px dotted black;
  padding-right: 5px;
}


/*** effects */
.blinker{
  animation-name: blinker;
  animation-duration: 0.5s;
  animation-iteration-count: 6;
  animation-timing-function: ease;
}
@keyframes blinker{
  50%{opacity: 0}
}

/* appear smoothly */
.fade-in{
  animation: fadein 2s;
}
@keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}

/* loader */
#wait{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .5;
  display: none;
  z-index: 9999;
}
.wait-layer{
  position: fixed;
  top: 50%;
  left: 50%;
}
.loader{
  content: " ";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #ccc;
  border-top-color: #444;
  animation: loader-anim 1s linear infinite;
}
@keyframes loader-anim {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.loader-center{
  margin: 10px auto;
  width: 48px;
}


/* spinner */
@keyframes spinner{
  to {transform: rotate(360deg);}
}

.spinner:before{
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner 1s linear infinite;
}


/* page transition */
@keyframes fadein{
  from {opacity: 0;}
  to   {opacity: 1;}
}