/* Html replace style */
body {
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
}

/* Remove Arrows/Spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { /* Chrome, Safari, Edge, Opera */
  -webkit-appearance: none;
  margin: 0;
}

/* CheckBox Switch */
.form-switch .form-check-input:checked {
  background-color: #71BC78;
  border-color: #71BC78;
  border: none;
  /* background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>"); */
}

/* Custom Range Input */
input[type=range] {
  height: 21px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #DDD;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 5px;
  background: #71BC78;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #DDD;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #DDD;
  border-radius: 1px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 5px;
  background: #71BC78;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #DDD;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #DDD;
  border: 0px solid #000000;
  border-radius: 2px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 5px;
  background: #71BC78;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #DDD;
}
input[type=range]:focus::-ms-fill-upper {
  background: #DDD;
}


/* Firefox */
/* input[type=number] {
  -moz-appearance: textfield;
} */

/* Element Width */
.w-20 {
  width: 20%;
}

/* Datatables */
/* Move search box to left side */
.dataTables_filter { 
  color: #888;
  font-size: small;
  float: right!important;
  padding-bottom: 20px;
}

.dataTables_filter input {
   color: #888;
   font-size: small;
   width: 300px;
}

.dataTables_empty {
  color: #888;
  font-size: small;
}

.dataTables_info {
  color: #888!important;
  font-size: small;
  padding-top: 20px!important;
}

.dataTables_paginate {
  color: #888!important;
  font-size: small;
  padding-top: 20px!important;
}

.paginate_button {
  background: none!important;
  border: none!important;
  color: #888!important;
  font-size: small;
  padding-top: 5px!important;
  padding-right: 10px!important;
  padding-bottom: 5px!important;
  padding-left: 10px!important;
}

.paginate_button:hover {
  background: #888!important;
  border: none!important;
  color: #888!important;
  font-size: small;
}

.paginate_button.current {
  background: none!important;
  border: none!important;
  color: #888!important;
  font-size: small;
  font-weight: bold;
}

/* Row Selected Style */
table.dataTable tbody tr.selected {
  color: white!important;
  background-color: #eeeeee!important;
}

.bg-gray {
  background-color: #ddd;
}

.bg-green {
  background-color: #71BC78;
}

.bg-red {
  background-color: #CB4335;
}

.bg-yellow {
  background-color: #FDDD5C;
}

.btn-darkgray {
  background-color: #555;
  border-color: #555;
  color: #fff;
  font-size: small;
}

.btn-darkgray:hover {
  background-color: #fff;
  border-color: #fff;
  color: #555;
  font-size: small;
}

.btn-darkgray-outline {
  background-color: #fff;
  border-color: #555;
  color: #555;
  font-size: small;
}

.btn-darkgray-outline:hover {
  background-color: #555;
  border-color: #555;
  color: #fff;
  font-size: small;
}

.bg-lightblue {
  background-color: #93AAD4;
}

.bg-blue {
  background-color: #388BD4;
}

.bg-menu {
  background-color: #ddd;
  cursor: pointer;
}

.bg-menu.active {
  background-color: #93AAD4;
  border-radius: 50px 0px 0px 50px;
}

.bg-lightgray {
  background-color: #ddd;
}

.btn-blue {
  background-color: #388BD4;
  color: #fff;
  font-size: small;
}

.btn-blue:hover {
  background-color: #fff;
  border-color: #388BD4;
  color: #388BD4;
  font-size: small;
}

.btn-blue-outline {
  background-color: #fff;
  border-color: #388BD4;
  color: #388BD4;
  font-size: small;
}

.btn-blue-outline:hover {
  background-color: #388BD4;
  border-color: #388BD4;
  color: #fff;
  font-size: small;
}

.btn-blue-reverse {
  background-color: transparent;
  border-color: #388BD4;
  color: #388BD4;
  font-size: small;
}

.btn-blue-reverse:hover {
  background-color: #388BD4;
  border-color: #388BD4;
  color: #fff;
  font-size: small;
}

.btn-white {
  background-color: #fff;
  border-color: #888;
  color: #888;
  font-size: small;
}

.btn-white:hover {
  background-color: #888;
  color: #fff;
  font-size: small;
}

.btn-gray {
  background-color: #888;
  color: #fff;
  font-size: small;
}

.btn-gray:hover {
  background-color: #fff;
  border-color: #888;
  color: #888;
  font-size: small;
}

.btn-lightgray {
  background-color: #ddd;
  color: #fff;
  font-size: small;
}

.btn-lightgray:hover {
  background-color: #fff;
  border-color: #ddd;
  color: #ddd;
  font-size: small;
}

.btn-lightgray.active {
  background-color: #fff;
  border-color: #ddd;
  color: #ddd;
  font-size: small;
}

.btn-green {
  background-color: #71BC78;
  color: #fff;
  font-size: small;
}

.btn-green:hover {
  background-color: #fff;
  border-color: #71BC78;
  color: #71BC78;
  font-size: small;
}

.btn-green-outline {
  background-color: #fff;
  border-color: #71BC78;
  color: #71BC78;
  font-size: small;
}

.btn-green-outline:hover {
  background-color: #71BC78;
  border-color: #71BC78;
  color: #fff;
  font-size: small;
}

.btn-green-reverse {
  background-color: transparent;
  border-color: #71BC78;
  color: #71BC78;
  font-size: small;
}

.btn-green-reverse:hover {
  background-color: #71BC78;
  border-color: #71BC78;
  color: #fff;
  font-size: small;
}

.btn-red {
  background-color: #CB4335;
  color: #fff;
  font-size: small;
}

.btn-red:hover {
  background-color: #fff;
  border-color: #CB4335;
  color: #CB4335;
  font-size: small;
}

.btn-red-outline {
  background-color: #fff;
  border-color: #CB4335;
  color: #CB4335;
  font-size: small;
}

.btn-red-outline:hover {
  background-color: #CB4335;
  border-color: #CB4335;
  color: #fff;
  font-size: small;
}

.btn-trans {
  background-color: transparent;
  border: none;
  color: #888;
  font-size: small;
}

.btn-trans:hover {
  background-color: #888;
  border-color: #888;
  color: #fff;
  font-size: small;
}

.btn-sticker {
  background-color: transparent;
}

.btn-sticker:hover {
  background-color: #ddd;
}

.chk-gray { accent-color: #888; }

.txt-blue { color: #388BD4; }
.txt-blue:hover { color: #ffffff; }
.txt-lightblue { color: #93AAD4; }
.txt-green { color: #71BC78; }
.txt-gray { color: #888; }
.txt-darkgray { color: #555; }
.txt-lightgray { color: #ddd; }
.txt-white { color: #fff; }
.txt-red { color: #CB4335; }
.txt-yellow { color: #FDDD5C; }

.xsmall {
  font-size: 0.75rem;
}

/* Login page */
.bg-login {
    background-color: #93AAD4;
}

.btn-login {
    background-color: #93AAD4;
}

/* Chat page */
.msg-receive {
  background-color: #efefef;
  border-radius: 20px 20px 20px 20px;
}

.msg-send {
  background-color: #c3f69d;
  border-radius: 20px 20px 20px 20px;
}

.msg-img {
  border-radius: 15px 15px 15px 15px;
  cursor: pointer;
}

.msg-video {
  border-radius: 15px 15px 15px 15px;
  cursor: pointer;
}

.bootbox-img .modal-dialog .modal-content .modal-body {
  border: none;
  padding: 0px!important;
}

.bootbox-img .modal-dialog .modal-content .modal-footer {
  border: none;
  padding-left: 0px!important;
  padding-top: 0px!important;
  padding-right: 0px!important;
  padding-bottom: 5px!important;
}

.bootbox-sticker .modal-dialog .modal-content .modal-body {
  border: none;
  padding: 0px!important;
}

.bootbox-sticker .modal-dialog .modal-content .modal-footer {
  border: none;
  padding-left: 0px!important;
  padding-top: 0px!important;
  padding-right: 0px!important;
  padding-bottom: 5px!important;
}