/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.form-group a {
  color: #5f5f5f;
}
.dark-layout .form-group a {
  color: #d0d2d6;
}
.form-group a:hover {
  color: rgba(var(--brand-color));
}

.form-control:focus {
  border-color: rgba(var(--brand-color)) !important;
}
.form-control:focus-within {
  border-color: rgba(var(--brand-color)) !important;
}

.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {
  border-color: rgba(var(--brand-color)) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  box-shadow: 0 2px 4px 0 rgba(var(--brand-color)) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: rgba(var(--brand-color));
  background-color: rgba(var(--brand-color));
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  border-color: rgba(var(--brand-color));
  background-color: rgba(var(--brand-color));
}

.btn-primary:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px rgba(var(--brand-color));
}

.btn-primary {
  background-color: rgba(var(--brand-color)) !important;
  border-color: rgba(var(--brand-color)) !important;
}
.btn-primary:focus {
  background-color: rgba(var(--brand-color)) !important;
  border-color: rgba(var(--brand-color)) !important;
}
.btn-primary:focus-within {
  background-color: rgba(var(--brand-color)) !important;
  border-color: rgba(var(--brand-color)) !important;
}
.btn-primary:active {
  background-color: rgba(var(--brand-color)) !important;
  border-color: rgba(var(--brand-color)) !important;
}

.pace .pace-progress {
  background: rgba(var(--brand-color)) !important;
}

.navbar-brand img {
  max-width: 160px;
}

.main-menu.menu-fixed {
  top: 0;
}
.main-menu-content .navigation .nav-item a {
  padding: 12px 15px !important;
}

.gradiant-bg {
  background: url("/images/banner/banner-41.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.auth-wrapper.auth-v2 .auth-inner {
  overflow-x: hidden;
}

.link-yellow {
  color: #e49627;
}
.link-yellow:hover {
  color: #5f5f5f;
}
.link-grey {
  color: #5f5f5f;
}
.link-grey:hover {
  color: #e49627;
}

/*************** 1.Variables ***************/
/* ------------------ Color Pallet ------------------ */
/*************** 2.Mixins ***************/
/************************************************
    ************************************************
                                        Search Box
    ************************************************
************************************************/
.chat-search-box {
  border-radius: 3px 0 0 0;
  padding: 0.75rem 1rem;
}

.chat-search-box .input-group .form-control {
  border-radius: 2px 0 0 2px;
  border-right: 0;
}

.chat-search-box .input-group .form-control:focus {
  border-right: 0;
}

.chat-search-box .input-group .input-group-btn .btn {
  border-radius: 0 2px 2px 0;
  margin: 0;
}

.chat-search-box .input-group .input-group-btn .btn i {
  font-size: 1.2rem;
  line-height: 100%;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .chat-search-box {
    display: none;
  }
}
/************************************************
    ************************************************
                                    Users Container
    ************************************************
************************************************/
.users-container {
  position: relative;
  padding: 1rem 0;
  border-right: 1px solid #e6ecf3;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/************************************************
    ************************************************
                                            Users
    ************************************************
************************************************/
.users {
  padding: 0;
}

.users .person {
  position: relative;
  width: 100%;
  padding: 10px 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f4f8;
}
.dark-layout .users .person {
  border-bottom-color: #3b4253;
}

.users .person:hover {
  background-color: #ffffff;
  /* Fallback Color */
  /* Saf4+, Chrome */
  /* Chrome 10+, Saf5.1+, iOS 5+ */
  /* FF3.6 */
  /* IE10 */
  /* Opera 11.10+ */
  background-image: linear-gradient(right, #e9eff5, #ffffff);
}

.users .person.active-user {
  background-color: #ffffff;
  /* Fallback Color */
  /* Saf4+, Chrome */
  /* Chrome 10+, Saf5.1+, iOS 5+ */
  /* FF3.6 */
  /* IE10 */
  /* Opera 11.10+ */
  background-image: linear-gradient(right, #f7f9fb, #ffffff);
}

.users .person:last-child {
  border-bottom: 0;
}

.users .person .user {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.users .person .user img {
  width: 48px;
  height: 48px;
  border-radius: 50px;
}

.users .person .user .status {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #e6ecf3;
  position: absolute;
  top: 0;
  right: 0;
}

.users .person .user .status.online {
  background: #9ec94a;
}

.users .person .user .status.offline {
  background: #c4d2e2;
}

.users .person .user .status.away {
  background: #f9be52;
}

.users .person .user .status.busy {
  background: #fd7274;
}

.users .person p.name-time {
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
}

.users .person p.name-time .time {
  font-weight: 400;
  font-size: 0.7rem;
  text-align: right;
  color: #8796af;
}

@media (max-width: 767px) {
  .users .person .user img {
    width: 30px;
    height: 30px;
  }

  .users .person p.name-time {
    display: none;
  }

  .users .person p.name-time .time {
    display: none;
  }
}
/************************************************
    ************************************************
                                    Chat right side
    ************************************************
************************************************/
.selected-user {
  width: 100%;
  padding: 0 15px;
  min-height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #e6ecf3;
  border-radius: 0 3px 0 0;
}

.selected-user span {
  line-height: 100%;
}

.selected-user span.name {
  font-weight: 700;
}

.chat-container {
  position: relative;
  padding: 1rem;
}

.chat-container li.chat-left,
.chat-container li.chat-right {
  display: flex;
  flex: 1;
  flex-direction: row;
  margin-bottom: 40px;
}

.chat-container li img {
  width: 48px;
  height: 48px;
  border-radius: 30px;
}

.chat-container li .chat-avatar {
  margin-right: 20px;
}

.chat-container li.chat-right {
  justify-content: flex-end;
}

.chat-container li.chat-right > .chat-avatar {
  margin-left: 20px;
  margin-right: 0;
}

.chat-container li .chat-name {
  font-size: 0.75rem;
  color: #999999;
  text-align: center;
}

.chat-container li .chat-text {
  padding: 0.4rem 1rem;
  border-radius: 4px;
  background: #ffffff;
  font-weight: 300;
  line-height: 150%;
  position: relative;
}

.chat-container li .chat-text:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 10px;
  left: -20px;
  border: 10px solid;
  border-color: transparent #ffffff transparent transparent;
}

.chat-container li.chat-right > .chat-text {
  text-align: right;
}

.chat-container li.chat-right > .chat-text:before {
  right: -20px;
  border-color: transparent transparent transparent #ffffff;
  left: inherit;
}

.chat-container li .chat-hour {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 15px;
}

.chat-container li .chat-hour > span {
  font-size: 16px;
  color: #9ec94a;
}

.chat-container li.chat-right > .chat-hour {
  margin: 0 15px 0 0;
}

@media (max-width: 767px) {
  .chat-container li.chat-left,
.chat-container li.chat-right {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .chat-container li img {
    width: 32px;
    height: 32px;
  }

  .chat-container li.chat-left .chat-avatar {
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
  }

  .chat-container li.chat-left .chat-hour {
    justify-content: flex-end;
  }

  .chat-container li.chat-left .chat-name {
    margin-left: 5px;
  }

  .chat-container li.chat-right .chat-avatar {
    order: -1;
    margin: 0 0 5px 0;
    align-items: center;
    display: flex;
    justify-content: right;
    flex-direction: row-reverse;
  }

  .chat-container li.chat-right .chat-hour {
    justify-content: flex-start;
    order: 2;
  }

  .chat-container li.chat-right .chat-name {
    margin-right: 5px;
  }

  .chat-container li .chat-text {
    font-size: 0.8rem;
  }
}
.chat-form {
  padding: 15px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  border-top: 1px solid white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.new-chat-in {
  color: red;
}

li.uploaded-file-item {
  display: flex;
  flex-wrap: wrap;
}

ul#uploadedFiles li .file-info {
  flex: 1 0;
  width: 0;
  margin-bottom: 0px;
}

ul#uploadedFiles li button {
  margin-left: 10px;
  /* padding-top: 5px; */
  /* padding-bottom: 5px; */
}

li.uploaded-file-item {
  margin-bottom: 5px;
}