/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */


.tabulator{
  .tabulator-frozen-left{border: none;}
  .tabulator-tableholder{border-bottom: 2px solid #000000; border-top: 2px solid #000000;}
  .tabulator-row-even{background-color: #ffffff;} /* f2f2f2 */
  .tabulator-row:hover{background-color: #ececec;}
  .tabulator-selected{background-color: #e6edff;}
  .tabulator-selected:hover{background-color: #d1dfff;}
  .tabulator-header{border-bottom: none;}
  .tabulator-header .tabulator-col{justify-content: flex-end;}
  .tabulator-footer{
    border-top: none;
    background-color: #ffffff;
    .tabulator-calcs-holder{
      .tabulator-calcs-bottom{background-color: #ffffff!important; border: none!important;}
    }
  }
  .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border: none;}
  .tabulator-col.tabulator-frozen.tabulator-frozen-left{border: none;}
}

.bb-bg{background-color: #3B76FB}
.bb-border{border: 1px solid #3B76FB}

.btn-primary{background-color:#3B76FB; border-color:#3B76FB;}
.btn-primary:hover{background-color: #5287fc; border-color: #5287FC;}

.btn-light{background-color:#e9e9e9; border-color:#e9e9e9;}
.btn-light:hover{background-color: #eeeeee; border-color: #eeeeee;}

.square-card{border: 1px solid #ddd; border-radius: 0; padding: 16px;}

.font-bb{color: #5287FC}
.pending-review{color: rgb(211, 21, 21); font-style: italic}
.font-light-grey{color: #cecece}

.bb-shadow{box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

/* .table{border-radius: 6px 6px 6px 6px; overflow: hidden} */
.table th a{color: rgb(0, 0, 0)}
.table th a:hover{color: #000000}
.table tr a{text-decoration: none}
.table tr a:hover{text-decoration: none}
.table tr{vertical-align: middle}
.table a:hover {text-decoration: none; border-bottom: 1px solid #3B76FB}

.table {font-size: 0.9em}

.table thead tr {vertical-align: bottom}

.test-red{ border: 3px solid #c00707 }
.test-green{ border: 3px solid #8AC007 }

@media screen and (min-width: 768px) { }
@media screen and (max-width: 767px) { }

.mobile_only {display: none}
@media screen and (max-width: 991px) { .mobile_only {display: block} .desktop_only {display: none !important} }

.visible_xl_down {display: none}
@media screen and (max-width: 1399px) { .visible_xl_down {display: block} .visible_xxl_up {display: none !important} }

.visible_lg_down {display: none}
@media screen and (max-width: 1199px) { .visible_lg_down {display: block} .visible_xl_up {display: none !important} }

.visible_sm_down {display: none}
@media screen and (max-width: 767px) { .visible_sm_down {display: block} .visible_md_up {display: none !important} }

.active{color:#f5a700}

/* below is the CSS from the bootstrap example here: https://getbootstrap.com/docs/5.2/examples/sidebars/ */
body {min-height: 100vh; min-height: -webkit-fill-available}
 
 html {height: -webkit-fill-available}
 
 main {  height: 100vh;
         height: -webkit-fill-available;
         max-height: 100vh;
         overflow-x: auto;
         overflow-y: hidden}
 
 .dropdown-toggle { outline: 0; }
 
 .btn-toggle { padding: .25rem .5rem;
               font-weight: 600;
               color: rgba(0, 0, 0, .65);
               background-color: transparent}
 .btn-toggle:hover,
 .btn-toggle:focus { color: rgba(0, 0, 0, .85);
                     background-color: #eff4ff}
 
 .btn-toggle::before {
   width: 1.25em;
   line-height: 0;
   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform .35s ease;
   transform-origin: .5em 50%;
 }
 
 .btn-toggle[aria-expanded="true"] {color: rgba(0, 0, 0, .85)}
 .btn-toggle[aria-expanded="true"]::before {transform: rotate(90deg)}
 
 .btn-toggle-nav a { padding: .1875rem .5rem;
                     margin-top: .125rem;
                     margin-left: 1.25rem}
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {background-color: #eff4ff}
 
 .scrollarea {overflow-y: auto}

/* miscellaneous */
.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
}


/* Dropdown menu */

.dropdown-menu.active {display: block}
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px}

.onewrap {
  display: -webkit-box; /* Use this property to enable -webkit-line-clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Set the maximum number of lines you want to display */
  overflow: hidden;
  max-width: 100%; /* You can set this to the desired width of the <td> cell */
}

/* Custom underlines for link and link hover here */
/* a {text-decoration: none; border-bottom: 2px solid #3B76FB} */
/* a:hover {text-decoration: none; border-bottom: 1px solid #3B76FB} */

.custom-modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.5);
  backdrop-filter: blur(1.5px);
  z-index: 1999;
}

.custom-modal {
  width: 500px;
  max-width: 100dvw;
  word-break: break-word;
  border-radius: 12px;
  z-index: 2000;
}

.custom-flashes {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4000;
  max-width: 100dvw;
}

@keyframes showModal {
  from {
    transform: translateY(25px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hideModal {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(25px);
    opacity: 0;
  }
}

@keyframes showModalBackground {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes hideModalBackground {
  from {opacity: 1}
  to {opacity: 0}
}

.show-custom-modal {animation: showModal 0.1s forwards}
.hide-custom-modal {animation: hideModal 0.1s forwards}

.show-custom-modal-background {animation: showModalBackground 0.1s forwards}
.hide-custom-modal-background {animation: hideModalBackground 0.1s forwards}


::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #e4e4e4;
  border-radius: 20px;
  border: 3px solid #ffffff;
}

.animated-button, .animated-button-dark {
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease-in-out;
  z-index: 1;
}

.animated-button::before, .animated-button-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: left 0.2s ease-in-out;
  z-index: -1000;
}

.animated-button::before {
  background-color: rgba(255, 255, 255, 0.2);
}

.animated-button-dark::before {
  background-color: rgba(0, 0, 0, 0.05);
}

.animated-button:hover::before, .animated-button-dark:hover::before {
  left: 0;
}

.hidden {
  display: none;
}

.plain-link-white {
  color: #ffffff;
  text-decoration: none;
}
.plain-link-white:hover {
  color: #ffffff;
}

.w-320px {width: 320px}
.w-240px {width: 240px}
.w-200px {width: 200px}
.w-160px {width: 160px}
.w-128px {width: 128px}
.w-120px {width: 120px}
.w-96px {width: 96px}
.w-80px {width: 80px}
.w-64px {width: 64px}
.w-60px {width: 60px}
.w-56px {width: 56px}
.w-48px {width: 48px}
.w-40px {width: 40px}
.w-32px {width: 32px}
.w-24px {width: 24px}

.text-tp-hover-grey {color: #00000000}
.text-tp-hover-grey:hover {color: #acacac}




/* virtual data room related classes */
#file-tree ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#file-tree li {
  margin: 0;
  padding: 8px 0 0 0;
}

#file-tree .collapse-indicator {
  cursor: pointer;
}

#file-tree ul ul {
  display: none;
}

.dragging {
  opacity: 0.5;
}

.drop-before {
  border-top: 1.5px solid blue;
  margin-top: -1.5px;
}

.drop-after {
  border-bottom: 1.5px solid blue;
  margin-bottom: -1.5px;
}

.drop-zone-highlight {
  background-color: #def1df;
  /* outline: 1px dashed #4CAF50; */
}

.drop-zone-hover {
  /* background-color: #c4e7c7; */
  outline: 2px dashed #4CAF50;
}

/* Drop zone styles */
.drop-zone-active {
  display: flex !important;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}