/* MODALS ---------------------------------------------------------------------*/

.modal_icon {
  position: absolute;
  top:16px;
  left:-50px;
  color:#fff
}

.modal_entity_icon {
  position: absolute;
  top: 18px;
  color: #a2adb5;
  left: -34px;
}

.modal-backdrop.show {
  background: rgba(45, 62, 80, 0.8);
  opacity: 1
}

.modal-50 {
  max-width: 50% !important;
}
.modal-75 {
  max-width: 75% !important;
}

.modal.fade .modal-dialog {
  -moz-transition: none ;
  -o-transition: none ;
  -webkit-transition: none ;
  transition: none ;
  -moz-transform: none ;
  -ms-transform: none ;
  -o-transform: none ;
  -webkit-transform: none ;
  transform: none ;
}

.modal_backward{
  -moz-transform:translateX(-60px) scale(0.95);
  -webkit-transform:translateX(-60px) scale(0.95);
  transform:translateX(-60px) scale(0.95);
  opacity:0.65;
  width: calc(50vw + 10%);
  border-radius: 10px !important;
  transition: transform .2s ease-in-out;
}


.modal-content {
  border-radius: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: none !important;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0, .1);
  box-shadow: 0px 0px 15px 5px rgba(0,0,0, .1);
}

.modal_title_input {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border: none !important;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* .modal_title_input {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  margin-top:-6px;
  margin-bottom: -7px !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff !important;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
} */

.box_active_header {
  text-align: center;
  border-radius: .25rem;
  padding:8px 8px 8px 8px !important;
  cursor:pointer;
  position: absolute;
  top:8px;
  transition: background-color 0.2s ease-in-out;
}

.box_active_header:hover {
  background-color: rgba(199, 209, 216,.2);
  transition: background-color 0.2s ease-in-out;
}

.box_active_title {
  border-radius: .25rem;
  min-width: 100px;
  min-height: 32px;
  padding:8px 8px 8px 8px !important;
  cursor:pointer;
  transition: background-color 0.2s ease-in-out;
}

.box_active_title:hover {
  background-color: rgba(255, 255, 255,.5);
  transition: background-color 0.2s ease-in-out;
}

/* LEFT and RIGHT MODAL */

.modal.modal_md .modal-dialog{
  max-width: 50%;
  width: 50%;
}

.modal.modal_lg .modal-dialog{
  max-width: 75%;
  width: 75%;
}

.modal.modal_xl .modal-dialog{
  max-width: 90%;
  width: 90%;
}

/* Medium width */
.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  /* max-width: 50%;
  width: 50%; */
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content{
  height: 100%;
  overflow-y: hidden;
}


/*Left*/
.modal.left.fade .modal-dialog{
  left: -30%;
  -webkit-transition: opacity 0.3s linear, left 0.2s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.2s ease-out;
  -o-transition: opacity 0.3s linear, left 0.2s ease-out;
  transition: opacity 0.3s linear, left 0.2s ease-out;
}

.modal.left.fade .modal-dialog{
  left: 0%;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: -30%;
  -webkit-transition: opacity 0.3s linear, right 0.2s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.2s ease-out;
  -o-transition: opacity 0.3s linear, right 0.2s ease-out;
  transition: opacity 0.3s linear, right 0.2s ease-out;
}

.modal.right.fade.show .modal-dialog {
  right: 0%;
}

/* ----- MODAL STYLE ----- */
.modal-content.right, .modal-content.left  {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: none;
  transition: transform .2s ease-in-out;
}

.modal-content.radius_left {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: none;
}

.modal-content.radius_right {
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: none;
}

/* Large width */
.modal.left-lg .modal-dialog,
.modal.right-lg .modal-dialog {
  position: fixed;
  z-index:1100;
  margin: auto;
  /* max-width: 75%;
  width: 75%; */
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left-lg .modal-content,
.modal.right-lg .modal-content{
  height: 100%;
  overflow-y: auto;
}


/*Left*/
.modal.left-lg.fade .modal-dialog{
  left: -30%;
  -webkit-transition: opacity 0.3s linear, left 0.2s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.2s ease-out;
  -o-transition: opacity 0.3s linear, left 0.2s ease-out;
  transition: opacity 0.3s linear, left 0.2s ease-out;
}

.modal.left-lg.fade.show .modal-dialog{
  left: 0%;
}

/*Right*/
.modal.right-lg.fade .modal-dialog {
  right: -30%;
  -webkit-transition: opacity 0.3s linear, right 0.2s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.2s ease-out;
  -o-transition: opacity 0.3s linear, right 0.2s ease-out;
  transition: opacity 0.3s linear, right 0.2s ease-out;
}

.modal.right-lg.fade.show .modal-dialog {
  right: 0%;
}

/* ----- MODAL STYLE ----- */
.modal-content.right-lg, .modal-content.left-lg  {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: none;
}

.modal_top_menu {
  width:100%;
  padding-bottom:15px;
  border-bottom: 1px solid #e6e6e6;
}

.modal-dialog {
  overflow-y: initial !important
}

.modal-header {
  min-height: 54px;
  height:54px;
}

.modal-header:not(.modal.right .modal-header) {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.modal-header.bg_lightgrey {
  background: #e9eef2;
}

.modal_column {
  flex-grow: 1;
  display: contents;
  flex-direction: column;
}

.modal-body { /* Body for modal with 1 header + 1 top_menu */
  /* max-height: calc(100vh - 122px); */
  overflow-y: auto !important;
  overflow-x: hidden;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}
.modal-body::-webkit-scrollbar { width: 0 !important }

.overflow-auto.modal_icons {
  max-height: calc(100vh - 400px) !important;
}

.modal_overlay_grey {
  height: 100vh;
  /* background:#e9eef2; */
  /*background: rgb(233,238,242);
  background: -moz-linear-gradient(180deg, rgba(233,238,242,1) 0%, rgba(255,255,255,0.5298494397759104) 39%);
  background: -webkit-linear-gradient(180deg, rgba(233,238,242,1) 0%, rgba(255,255,255,0.5298494397759104) 39%);
  background: linear-gradient(180deg, rgba(233,238,242,1) 0%, rgba(255,255,255,0.5298494397759104) 39%); */
  background: rgb(233,238,242);
  background: -moz-linear-gradient(180deg, rgba(233,238,242,1) 15%, rgba(255,255,255,0.75) 30%);
  background: -webkit-linear-gradient(180deg, rgba(233,238,242,1) 15%, rgba(255,255,255,0.75) 30%);
  background: linear-gradient(180deg, rgba(233,238,242,1) 15%, rgba(255,255,255,0.75) 30%);
  position: absolute;
  width: 100%;
  z-index: 2;
  text-align: center
}

.modal-footer  {
  width: 100%;
  background: #fff;
  height: 69px;
  min-height: 69px;
  z-index: 1001;
}

.modal-footer:not(.modal.right .modal-header) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.modal_footer_flex  {
  display: flex;
}

.modal_footer_abs  {
  position: absolute;
  bottom: 0;
  left:0;
}

.modal_chat  {
  display:flex;
  width: 100%;
}

.modal_chat.with_submit  {
  bottom: 69px;
}




/* ---------------------------------------------------------------------------*/


/* -- MEDIA QUERIES ----------------------------------------------------------*/

/* Very Very Small devices */
@media (max-width: 413px) {

}


/*Small devices (landscape phones, 576px and up) */
@media (min-width: 321px) and (max-width: 991.98px) {

}

/*Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/*Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/*Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}


/* Very Small devices */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

  /* LEFT and RIGHT MODAL */
  /* Medium width */
  .modal.left .modal-dialog,
  .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    max-width: 100%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0%, 0);
    -ms-transform: translate3d(0, 0%, 0);
    -o-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
  }

  .modal.modal_md .modal-dialog{
    max-width: 100%;
    width: 100%;
  }

  .modal.modal_lg .modal-dialog{
    max-width: 100%;
    width: 100%;
  }

  .modal.modal_xl .modal-dialog{
    max-width: 100%;
    width: 100%;
  }

  .modal.left .modal-content,
  .modal.right .modal-content{
    height: 95%;
    overflow-y: hidden;
  }


  /*Right*/
  .modal.right.fade .modal-dialog {
    bottom: -50%;
    right: 0%;
    -webkit-transition: opacity 0.3s linear, bottom 0.2s ease-out;
    -moz-transition: opacity 0.3s linear, bottom 0.2s ease-out;
    -o-transition: opacity 0.3s linear, bottom 0.2s ease-out;
    transition: opacity 0.3s linear, bottom 0.2s ease-out;
  }

  .modal.right.fade.show .modal-dialog {
    bottom: -5%;
  }

  /* ----- MODAL STYLE ----- */
  .modal-content.right, .modal-content.left  {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: none;
  }


}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* --/ MEDIA QUERIES ---------------------------------------------------------*/