:root{    
  
    /*colors*/
    --primary-light:#F5F4F7 !important;
    --primary:#3a61c8 !important;
    --secondary:#666666 !important;
    --secondary-light:#F6F6F6 !important;
    --success:#1eca77 !important;
    --danger:#ED0404 !important;
    --pending:#FEF200 !important;
    --info:#53C5D5 !important;
    --pink:#EC157C !important;
    --black:#000000 !important;
    --white:#FFFFFF !important;
    --dark-grey:#C0C3D1 !important;
    --progress-grey:#E9ECEF !important;

    --text-primary:#3a61c8 !important;
    --text-secondary:#666666 !important;
    --text-secondary-light:#F6F6F6 !important;
    --text-success:#1eca77 !important;
    --text-danger:#ED0404 !important;
    --text-pending:#FEF200 !important;
    --text-info:#53C5D5 !important;
    --text-pink:#EC157C !important;
    --text-black:#000000 !important;
    --text-white:#FFFFFF !important;
    --text-disable:#8F94B8 !important;
    --text-grey: #CFCFCF !important;

    --bg-primary-light:#F5F4F7 !important;
    --bg-primary:#3a61c8 !important;
    --bg-secondary:#666666 !important;
    --bg-secondary-light:#F6F6F6 !important;
    --bg-success:#1eca77 !important;
    --bg-danger:#ED0404 !important;
    --bg-pending:#FEF200 !important;
    --bg-info:#53C5D5 !important;
    --bg-pink:#EC157C !important;
    --bg-grey:#F6F7FB !important;
    --bg-black:#000000 !important;
    --bg-white:#FFFFFF !important;
    --bg-dark-grey:#C0C3D1 !important;


    --border: #CFCFCF !important;
    --font-black:#3c3d42 !important;

}

.bootstrap-select>.dropdown-toggle {
  border: 1px solid #ced4da !important;
  background: #ffffff !important;
  border-radius: 25px !important;
  margin-top: -7px !important;
}

.textbox_box{
  margin-top:-8px;
  font-size: 13px;
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .85rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 25px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.textarea_box{
  margin-top:-8px;
  font-size: 13px;
  display: block;
  width: 100%;
  height: auto;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 25px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  padding: .375rem .85rem;
}

.textbox_label{
  font-size: 11px;
  padding-left: .25rem!important;
  padding-right: .25rem!important;
  margin-left: 15px!important;
  background-color: #fff!important;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  position: relative;
  min-height: 1px;
  color: #757575;
}

.boxshadow {
    box-shadow: 0 .025rem 0.3rem rgba(0,0,0,.1)!important;
}

.font-standard{
  font-size:13px;
}
/*font size*/
.font-9{
  font-size:9px;
}

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

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

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

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

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

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

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

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

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

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

.rounditem{
  border-radius: 25px!important;
}

.rounditem input{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.rounditem input{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.rounditem .input-group-text{
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.btnpadding{
  padding-top: 6px!important;
  padding-bottom: 6px!important;
}

.textlink{
  color: #0368ae!important;
}

.textlink: hover{
  text-decoration: underline;
}

.jq-toast-single {
  box-shadow: 0 .2rem 0.6rem rgba(0,0,0,.15)!important;
  padding: 13px!important;
}

.menulist{
  border-top: 1px solid #e2e2e2;
  padding: 10px 0px;
}

.menulist:first-child{
  border-top: none!important;
}

.menuopen{
  left: 0;
}

.menuclose{
  left: -85vw;
}

.notyopen{
  right: 0;
}

.notyclose{
  right: -100vw;
}

.viewopen{
  right: 0;
}

.viewclose{
  right: -100vw;
}

.jq-toast-wrap.top-right {
  top: 10px!important;
  right: 10px!important;
}

.jq-toast-wrap {
  width: calc(100vw - 20px)!important;
}

.close-jq-toast-single {
  font-size:24px!important;
  top: 10px!important;
  right: 13px!important;
}

.table-bordered td, .table-bordered th {
    border: 1px solid #000000!important;
}

.table-bordered {
    border: 1px solid #000000!important;
}

.step{
  width:30px;
  height:30px;
  border-radius:50px;
  align-items: center!important;
  justify-content: center!important;
  display: flex!important;
  border: 2px solid #0271b9!important;
  background: #ffffff;
  color: #0271b9;
  cursor: pointer;
}

.step.active{
  border: 2px solid #0271b9!important;
  background: #0271b9;
  color: #ffffff;
}

.form-check-input {
    margin-top: 7px!important;
    margin-left: -18px!important;
}

.form-check-label {
    font-size:13px;
    color: #757575;
}

.bgstatus-active{
  background-image: linear-gradient(to right bottom, #17a2b8, #1198b1, #0d8ea9, #0b84a1, #0c7a99, #0c7a99, #0c7a99, #0c7a99, #0b84a1, #0d8ea9, #1198b1, #17a2b8);
}

.bgstatus-cancel{
  background-image: linear-gradient(to right bottom, #e58830, #e47e28, #e37421, #e1691a, #e05e14, #e05e14, #e05e14, #e05e14, #e1691a, #e37421, #e47e28, #e58830);
}

.bgstatus-pending{
  background-image: linear-gradient(to right bottom, #acacae, #a5a5a7, #9f9fa1, #98989a, #929294, #929294, #929294, #929294, #98989a, #9f9fa1, #a5a5a7, #acacae);
}

.bgstatus-delete{
  background-image: linear-gradient(to right bottom, #ed0404, #db0607, #ca0709, #b9090a, #a80a0b, #a80a0b, #a80a0b, #a80a0b, #b9090a, #ca0709, #db0607, #ed0404);
}

.bgstatus-complete{
  background-image: linear-gradient(to right bottom, #0fce4c, #12c341, #13b836, #13ad2b, #12a21f, #12a21f, #12a21f, #12a21f, #13ad2b, #13b836, #12c341, #0fce4c);
}
/**===== bars6 =====*/
#bars6 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin: -50px 0 0 -25px;
}

#bars6 span {
  position: absolute;
  display: block;
  bottom: 10px;
  width: 9px;
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  -webkit-animation: bars6 1.5s  infinite ease-in-out;
          animation: bars6 1.5s  infinite ease-in-out;
}

#bars6 span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#bars6 span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#bars6 span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

#bars6 span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@keyframes bars6 {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #0057e7;
  }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
}
@-webkit-keyframes bars6 {
  0% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #0057e7;
  }
  50% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    height: 5px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    background: rgba(0, 0, 0, 0.25);
  }
}
/** END of bars6 */


input.middle:focus {
    outline-width: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.form-control:focus {
    color: #495057!important;
    background-color: #fff!important;
    border-color: #cfd5da!important;
    outline: 0!important;
    box-shadow: 0 0 0 0 rgb(0 123 255 / 25%)!important;
}

.textbox_box.select {
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
  appearance: none!important;
  background-image: url(../../image/down-arrow.png);
  background-repeat:no-repeat;
  background-position: 98% 49%;
  background-size: 21px 21px;
}

.slideropen {
  /*position: fixed;*/
  bottom: 0;
  overflow: hidden;
  z-index: 2000;
  min-height: 20vh;
  background: #ffffff;
  border-radius: 10px;
}

.sliderclose {
  bottom: 0%;
  height: 0;
  /*position: fixed;*/
  overflow: hidden;
  z-index: 2001;
}

.hidesliderbg{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -1;
  top:0;
  background-color: rgba(0,0,0,0);
}

.showsliderbg{
  display: block;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 2000;
  top:0;
  background-color: rgba(0,0,0,0.5);
}

.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100vw;
}

.unread {
  background: #e0f3ff;
}

.tabmenu {
  color: #9e9e9e;
}

.tabmenu .active {
  color: #2f8ff5;
  border-bottom: 2px solid #2f8ff5;
  font-weight: bold;
}