body {
    overflow-y: scroll;
    display: block;
  }
  

  
  .header {
    /* left: 16px; */
    right: 16px;
  }

  .nav_ul .draft_li.opened a, .nav_ul .templates_li.opened a {
    color: #268BD2;
  }

  .header_top .new:hover {
    box-shadow: 0 0 1px 0 #fff0;
    border: 2px solid rgb(170, 54, 1);
    animation: spinAndReturn 0.5s linear;
  }
  
  @keyframes spinAndReturn {
    0% {
      transform: rotate(45deg);
    }
    99% {
      transform: rotate(405deg);
    }
    100% {
      transform: rotate(45deg);
    }
  }
  
  
.header_top .new {
  position: absolute;
  top: 16px;
  right: 40px;
  width: 28px;
  height: 28px;
  background: #163300 url("../assets/close_light.png");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px solid #163300;
  cursor: pointer;
  transform: rotate(45deg);
  /* box-shadow: 0 3px 6px -2px #0004; */
  /* filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%); */
}



.header_top .new:hover {
  background-color: #163300;
  /* border: 2px solid rgb(170, 54, 1); */
  /* box-shadow: 0 3px 6px -2px #0006; */
}

.more_options_div_new {
  position: fixed;
  top: 50px;
  right: 72px;
  width: 224px;
  min-height: fit-content;
  height: auto !important;
  display: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 3px 16px -3px #0006 !important;
  border-radius: 4px !important;
  z-index: 999999999999999999999999999999 !important;;
  background: #fff;
  border: 1px solid #cfcfcf;
  outline: none;
  user-select: none;
}


.more_options_div_new .more_options_div_a {
  position: relative;
  display: block;
  padding: 3px 8px !important;
  margin: 0;
  vertical-align: middle;
  color: #000;
}

.more_options_div_new .more_options_div_a span {
  vertical-align: middle;
  color: #000;
}

.header .more_options_div_new, .more_options_div_drafts, .more_options_div_templates {
  position: absolute;
  top: 50px;
  right: 42px;
  width: 224px;
  min-height: fit-content;
  height: auto !important;
  display: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 3px 16px -3px #0006 !important;
  border-radius: 4px !important;
  z-index: 999999999999999999999999999999;
  background: #fff;
  border: 1px solid #cfcfcf;
  outline: none;
  user-select: none;
}

.more_options_div_drafts {
  top: 116px;
  right: auto;
  left: 192px;
  width: 264px;
  z-index: 99999999999999999999999999999999 !important;
}

.more_options_div_templates {
  top: 116px;
  right: auto;
  left: 282px;
  width: 264px;
  z-index: 99999999999999999999999999999999 !important;
}

.header .more_options_div_new .more_options_div_a, .more_options_div_drafts .more_options_div_a, .more_options_div_templates .more_options_div_a {
  position: relative;
  display: block;
  padding: 3px 8px !important;
  margin: 0;
  vertical-align: middle;
  color: #000;
  user-select: none;
  outline: none;
  text-decoration: none !important;
}

.header .more_options_div_new .more_options_div_a span, .more_options_div_drafts .more_options_div_a span, .more_options_div_templates .more_options_div_a span {
  vertical-align: middle;
  color: #000;
}

.more_options_div_new .more_options_div_a span.soon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  color: #268BD2;
  background: #e1f2ff;
  font-size: 8px;
  font-weight: normal;
  padding: 2px 6px;
  border-radius: 4px;
  border: 2px solid #b3defd;
  margin: 0;
  /* box-shadow: inset 0 4px 12px rgba(149, 195, 230, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.more_options_div_new .more_options_div_a:hover, .more_options_div_templates .more_options_div_a:hover {
  cursor: pointer;
  background-color: #f4f4f4;
  color: #000;
  text-decoration: none;
}

.more_options_div_new img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  margin-right: 8px;
  display: inline-block;
  border: none !important;
  position: relative;
  top: 0;
  padding: 2px;
  background-color: transparent;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(25%) contrast(103%);
}

.header .more_options_div_new .more_options_div_a:hover, .more_options_div_drafts .more_options_div_a:hover, .more_options_div_templates .more_options_div_a:hover {
  cursor: pointer;
  background-color: #f4f4f4;
  color: #000;
  text-decoration: none;
}

.header .more_options_div_new img, .more_options_div_drafts img, .more_options_div_templates img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  margin-right: 8px;
  display: inline-block;
  border: none !important;
  position: relative;
  top: 0;
  padding: 2px;
  background-color: transparent;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(25%) contrast(103%);
}

.header .more_options_div_new .more_options_create_sign, .more_options_div_drafts .more_options_drafts_sign, .more_options_div_templates .more_options_template_sign {
  border-top: 1px solid #ccc;
}

.header .more_options_div_new .more_options_create_sign:hover, .more_options_div_drafts .more_options_drafts_sign:hover, .more_options_div_templates .more_options_template_sign:hover {
  background-color: #fff;
  cursor: default;
  cursor: pointer;
  background-color: #f4f4f4;
  color: #000;
  text-decoration: none;
}

.header .more_options_div_new .more_options_create_sign img, .more_options_div_drafts .more_options_drafts_sign img, .more_options_div_templates .more_options_template_sign img {
  padding: 3px;
}


.pages {
  position: absolute;
  display: none;
  /* left: 8px; */
  right: 110px;
  top: 10px;
  margin-top: 16px;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  /* border-top: 1px dashed #ccc; */
  z-index: 99999999999999999 !important;
}

.paginationjs-pages {
  display: block !important;
  margin: 0 0 0 0 !important;
  /* box-shadow: 0 3px 8px -3px #0004; */
  box-shadow: 0 3px 8px -3px #0002;
}

.paginationjs-pages ul {
  outline: none !important;
  border: 1px solid #bbb !important;
  border-radius: 8px !important;
  background-color: #F5F5EE !important;
  padding: 6px 6px !important;
}
  
.paginationjs-prev a, .paginationjs-next a {
  font-weight: bolder !important;
  /* background-color: #E9E7E4 !important; */
  background-color: #F5F5EE !important;
}

.paginationjs-next, .paginationjs-next a {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

.paginationjs-prev, .paginationjs-prev a {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
}

.paginationjs-prev:not(.disabled):hover a, .paginationjs-next:not(.disabled):hover a {
  background-color: #eae7e4 !important;
  color: #000 !important;
}

.paginationjs-prev.disabled:hover a, .paginationjs-next.disabled:hover a {
  cursor: not-allowed !important;
}

.paginationjs-page a {
  background-color: #F5F5EE !important;
  /* font-weight: bold; */
  color: #999 !important;
}

.paginationjs-page.active a {
  color: #fff !important;
  background-color: #111 !important;
  font-weight: bold;
  /* border-top: 1px solid #888 !important;
  border-bottom: 1px solid #bbb !important; */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 1) !important;
}

.paginationjs-page:not(.active):hover a {
  color: #000 !important;
  font-weight: bold;
}

.paginationjs-ellipsis.disabled a {
  color: #000 !important;
  font-weight: bold;
}




  .loading {
    z-index: 99999999999999999;
}

  

.app-search {
  padding-bottom: 6px;
  display: block;
  position: absolute;
  top: 14px;
  left: calc(50% - 225px);
  /* right: 48px; */
  margin: 0;
  height: 32px;
  width: 450px;
  pointer-events: none;
}



.header .header_top .search_bar {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  height: 32px;
  width: 100%;
}

.app-search-filter {
  position: absolute !important;
  right: 2px;
  top: 0;
  width: 32px !important;
  height: 32px !important;
  opacity: 0.9 !important;
  /* cursor: pointer !important; */
  padding: 9px !important;
  object-fit: contain !important;
  box-sizing: border-box !important;
  -webkit-box-sizing:border-box !important;
  -moz-box-sizing: border-box !important;
  border-radius: 50%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* pointer-events: none !important; */
  /* display: none; */
}

.app-search-filter:hover {
  opacity: 1 !important;
}


  .header .upload {
    position: absolute;
    top: 10px;
    right: 32px;
    padding: 6px 23px;
    border-radius: 8px;
    border: 1px solid #000;
    text-decoration: none;
    cursor: pointer;
    background: #111;
    box-shadow: 0 3px 8px -3px #0006;
  }

  .header .upload span {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    /* background: url("../../assets/upload.png");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center; */
    opacity: 1;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(190%) contrast(103%);
  }

  .header .upload:hover {
    cursor: pointer;
    background: #000;
    box-shadow: 0 3px 8px -3px #0009;
  }

  .header .upload:hover span path {
    color: #fff;
    fill: #fff !important;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(190%) contrast(103%);
  }

  .header .upload span .arrow path {
    
  }

  .header .upload:hover span .arrow path {
    transition: transform 0.35s ease;
  }

  .header .upload span .arrow path {
    /* animation: moveArrowBack 0.4s forwards; */
  }

  .header .upload:hover span .arrow path {
    animation: moveArrow 0.7s forwards;
  }

  @keyframes moveArrow {
    95% {
      transform: translateY(-24px);
      opacity: 0;
    }
    98% {
      transform: translateY(3px);
      opacity: 0.8;
    }
    99% {
      transform: translateY(0px);
      opacity: 1;
    }
  }

  @keyframes moveArrowBack {
    to {
      transform: translateY(0);
    }
  }

  
  

 
  
  .header .stats {
    position: absolute;
    top: 22px;
    right: 120px;
    font-style: italic;
    font-size: 11px;
    color: #999;
    text-align: right;
    cursor: pointer;
  }

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


  .header .layout {
    position: absolute;
    top: 10px;
    /* right: 110px; */
    right: 32px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid #bbb;
    padding: 4px;
    box-shadow: 0 3px 8px -3px #0002;
    background: #F5F5EE;
  }

  .header .layout div {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    border-radius: 7px;
  }

  .header .layout div svg path {
    fill: #777 !important;
    margin: 0 !important;
  }

  .header .layout div svg {
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 4px;
    vertical-align: middle;
    text-align: center;
    align-items: center;
  }

  .header .layout div.active {
    background-color: #E9E7E4;
    border: 1px solid #bbb;
  }

  .header .layout div.active svg path {
    fill: #000 !important;
  }


  .header .layout div:not(.active):hover {
    cursor: pointer;
    background-color: #eae7e4;
  }
  
  .header .layout div:not(.active):hover svg path {
    fill: #555 !important;
  }
  

.main_div {
    display: block;
    position: relative;
    /* background: red; */
    top: 103px;
    margin: 16px auto 50px auto;
    height: calc(100% - 105px);
    width: calc(100% - 0);
    padding: 0 76px 16px 76px;
    list-style: none;
  }


  .main_div .actions_div {
    display: none;
    position: sticky; 
    top: 120px;
    height: auto;
    min-height: 64px;
    margin: 0;
    padding: 11px 0 !important;
    text-align: left;
    background: #F5F5EE;
    border-bottom: 1px solid #ccc;
    z-index: 99999999999999999 !important;
  }

  .main_div .actions_div p {
    position: relative;
    display: inline-block;
    font-size: 12px;
    color: #999;
  }


  /* .main_div .actions_div .selected_files_cancel {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/close.png');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 !important;
    padding: 0;
    opacity: 1;
    cursor: pointer;
    vertical-align: middle;
    z-index: 999;
    border-radius: 50%;
  }

  .main_div .actions_div .selected_files_cancel:hover {
    opacity: 1;
    background-color: #eae7e4;
    cursor: pointer;
  } */

  .main_div .actions_div .selected_files_cancel {
    position: relative;
    display: inline-block;
    width: 19px;
    cursor: pointer;
    vertical-align: middle;
    z-index: 999;
    outline: none;
    padding: 0;
    margin: 0 7px;
    overflow: visible;
  }

  .main_div .actions_div .selected_files_cancel input {
    display: none;
    padding: 0;
    margin: 0;
  }

  .main_div .actions_div .selected_files_cancel label {
    display: inline-block;
    width: 19px;
    height: 19px;
    cursor: pointer;
    z-index: 9;
    box-shadow: 2px 3px 10px -3px #0007;
    padding: 0;
    margin: 0;
    border: 1px solid #D3D3D3;
    border-radius: 3px;
    background-color: #0075FF;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
    line-height: 17px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .main_div .actions_div .selected_files_cancel label:hover {
    background-color: #005CC8;
  }

  /* .main_div .actions_div .selected_files_cancel input:checked+label {
    background: #000;
    color: #fff
  } */

  .main_div .actions_div .selected_files_count {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    min-width: 98px;
    color: #666;
    font-weight: bold;
  }

  .main_div .actions_div .selected_files_export {
    position: relative;
    left: 4px;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background: transparent url('../../assets/upload.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    border-radius: 50%;
  }

  .main_div .actions_div .selected_files_export:hover {
    background-color: #eae7e4;
    cursor: pointer;
  }

  .main_div .actions_div .selected_files_download {
    position: relative;
    left: 4px;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background: transparent url('../../assets/download.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    border-radius: 50%;
  }

  .main_div .actions_div .selected_files_download:hover {
    background-color: #eae7e4;
    cursor: pointer;
  }

  .main_div .actions_div .selected_files_download.export_media_loading {
    animation: pulseanim 1.2s ease-in-out infinite;
    -webkit-animation: pulseanim 1.2s ease-in-out infinite;
  }
  
  @keyframes pulseanim {
    0% { opacity: 0.9;}
    50% { opacity: 0.5;}
    100% { opacity: 1;}
  }

  .main_div .actions_div .selected_files_download.export_media_fail {
    background-color: transparent !important;
    filter: invert(49%) sepia(12%) saturate(1671%) hue-rotate(280deg) brightness(102%) contrast(77%);
    animation: shake 0.3s linear;
    -webkit-animation: shake 0.3s linear;
  }
  /* also need keyframes and -moz-keyframes */
  @keyframes shake {
      8%, 41% {
          transform: translateX(-10px);
          -webkit-transform: translateX(-10px);
      }
      25%, 58% {
          transform: translateX(10px);
          -webkit-transform: translateX(10px);
      }
      75% {
          transform: translateX(-5px);
          -webkit-transform: translateX(-5px);
      }
      92% {
          transform: translateX(5px);
          -webkit-transform: translateX(5px);
      }
      0%, 100% {
          transform: translateX(0);
          -webkit-transform: translateX(0);
      }
  }


  .main_div .actions_div .selected_files_more {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background: transparent url('../../assets/more.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    border-radius: 50%;
  }

  .main_div .actions_div .selected_files_more:hover {
    background-color: #eae7e4;
    cursor: pointer;
  }
  
  







  .main_div .filter_div {
    position: sticky; 
    top: 121px;
    margin: 0;
    padding: 15px 0;
    min-height: 64px;
    text-align: left;
    pointer-events: none;
    background: #F5F5EE;
    z-index: 9999999999999999 !important;
    /* background: yellow; */
  }
  
  
  .main_div .filter_div .filter_div_icon {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/filter_light.png');
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center 40%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
  }
  
  
  .main_div .filter_div .inner_filter_divs {
    position: relative;
    display: inline-block;
    width: 200px;
    width: calc(99%/5 - 9px);
    margin: 0;
  }
  
  .main_div .filter_div .client_div {
    /* width: calc(100% - 900px); */
    /* min-width: 200px; */
  }
  
  
  .main_div .filter_div .folder_div {
    /* width: calc(100% - 700px); */
    /* min-width: 200px; */
  }
  
  
  .main_div .filter_div .select {
    display: inline-block;
    width: 100%;
    height: 32px;
    /* padding: 11px 30px 10px 14px; */
    padding: 0 30px 0 14px;
    margin: 0;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #000 !important;
    text-align: left !important;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    -ms-user-select: text;
    user-select: text;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0 3px 8px -3px #0001;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: #FDFDF8 url('../../assets/dropdown_dark.png');
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    cursor: pointer;
  }
  
  .client_div .client_search_bar.select {
    cursor: text !important;
  }
  
  
  .main_div .filter_div input {
    width: 100%;
    height: 32px;
    /* padding: 11px 30px 10px 14px; */
    padding: 0 30px 0 14px;
    margin: 0;
    border: 1px solid #aaa;
    border-radius: 8px;
    color: #000 !important;
    background: #FDFDF8;
    text-align: left !important;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    -ms-user-select: text;
    user-select: text;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0 3px 8px -3px #0001;
  }
  
  .main_div .filter_div input:focus, .main_div .filter_div select:focus {
    border-color: #268BD2;
  }
  
  
  
  .main_div .filter_div ul, .main_div .filter_div .options {
    display: none;
    position: absolute;
    background: #fff;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 99999;
    color: #333 !important;
    font-size: 14px !important;
    height: auto;
    max-height: 268px;
    overflow: hidden;
    margin: 0;
    padding: 0 0 8px 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid #bbb !important;
    border-color: transparent #bbb #bbb #bbb;
    box-shadow: 0 3px 16px -3px #0004;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .main_div .filter_div ul li, .main_div .time_div .options .disabled {
    position: relative;
    padding: 4px 12px;
    margin: 0;
    color: #333;
    border-radius: 0px;
  }
  
  .main_div .filter_div ul .disabled .clear, .main_div .time_div .options .disabled .clear {
    position: absolute;
    top: 6px;
    right: 0px;
    /* float: right; */
    /* width: 32px; */
    margin: 0 8px 0 0;
    padding: 2px 8px;
    font-size: 12px;
    color: #1a73e8;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(229, 231, 235, 0.85);
    background-color: #fff;
  }
  
  .main_div .filter_div .options .disabled .clear:hover {
    color: #004eb3;
    background-color: rgba(229, 231, 235, 0.5);
    border: 1px solid rgba(229, 231, 235, 1);
  }
  
  .main_div .filter_div .options .disabled {
    padding: 8px 0px 8px 12px;
    color: #999;
    font-size: 13px;
  }

  .main_div .type_div .options {
    max-height: 300px;
    overflow-y: auto;
  }

  
  
  /* TIME FILTER */
  
  .main_div .time_div .options {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .main_div .time_div .options .request_filter_time_div {
    padding: 8px 12px;
  }
  
  
  .main_div .time_div .options input {
    width: 100%;
    margin: 2px 0;
    outline: none;
    padding: 4px;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
  }
  
  .main_div .time_div .options .request_filter_time_div input:focus {
    border: 1px solid #268BD2;
  }
  
  .main_div .time_div .options .request_filter_time_div p {
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: bold;
    /* color: #999; */
  }
  
  .main_div .time_div .options .time_shortcuts {
    display: block;
    margin: 6px 12px;
  }
  
  .main_div .time_div .options .time_shortcuts .option {
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #268BD2;
    font-size: 11px;
    background: #E1F2FF;
    border: 1px solid #ddd;
    padding: 3px 7px;
    margin: 0 0 6px 0;
    display: inline-block;
  }
  
  .main_div .time_div .options .time_shortcuts .option:hover {
    background-color: #E1F2FF;
    border: 1px solid #257FDF;;
  }
  
  

  

  
  .main_div .filter_div ul li input[type=checkbox] {
    position: relative;
    top: 2px;
    float: left;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    pointer-events: none;
    vertical-align: middle;
  }
  
  .main_div .filter_div ul li span {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .main_div .filter_div ul li:not(.disabled):hover {
    cursor: pointer;
    background: #f6f6f6;
  }
  
  
  .main_div .filter_div ul .active {
    background: #f6f6f6;
  }
  
  .main_div .filter_div .options .line_break {
    border-bottom: 1px solid #ccc;
    margin: 6px 0 12px 0;
    padding: 1px 8px;
    display: block;
  }
  
  
  
  /* Client filter */
  
  .main_div .filter_div .client_div .options, .main_div .filter_div .folder_div .options {
    overflow-y: auto;
    right: -150%;
    height: auto;
    max-height: 268px;
  }
  
  
  .main_div .filter_div .client_div .options li input[type=checkbox] {
    top: 4px;
    pointer-events: none;
  }
  
  .main_div .filter_div .client_div .options .client_li {
    position: relative;
    width: 100%;
    padding: 6px 1px 6px 12px;
    margin: 4px 0;
    font-size: 12px;
  }
  
  .main_div .filter_div .client_div .options .selected{
    background-color: #f6f6f6;
  }
  
  .client_div .options li input[type=checkbox]:checked ~ p.name {
    color: #268BD2;
  }
  
  .client_div .options li input[type=checkbox]:checked ~ .avatar {
    border: 1px solid #268BD2;
    /* filter: invert(50%) sepia(19%) saturate(3123%) hue-rotate(172deg) brightness(89%) contrast(84%); */
  }
  
  .main_div .filter_div .client_div .options li .avatar {
    display: inline-block;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid #000;
    object-fit: cover;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 26px;
    background: #f4f4f4;
    opacity: 1;
    -webkit-transition: opacity 0.15s ease-in-out;
    -moz-transition:    opacity 0.15s ease-in-out;
    -ms-transition:     opacity 0.15s ease-in-out;
    -o-transition:      opacity 0.15s ease-in-out;
    transition:         opacity 0.15s ease-in-out;
  }
  
  .main_div .filter_div .client_div .options li .name {
    position: relative;
    top: -3px;
    vertical-align: top;
    display: inline-block;
    font-weight: bold;
    width: calc(99% - 58px);
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* width: calc(100% - 60px); */
  }
  
  .main_div .filter_div .client_div .options li .name span {
    position: relative;
    display: inline-block;
    color: #aaa;
    font-size: 11px;
    font-weight: normal;
    margin-left: 8px;
    width: auto;
    padding: 0 3px;
    margin: 0 0 0 4px;
    /* background-color: rgba(225, 242, 255, 0.3); */
    border-radius: 4px;
    border: 1px solid rgba(225, 242, 255, 1);
    border: 1px solid #ddd;
  }
  
  .main_div .filter_div .client_div .options li:hover .name span {
    color: #666;
    background-color: rgba(225, 242, 255, 0.45);
    border: 1px solid rgba(214, 237, 255, 0.75);
  }
  
  
  .main_div .filter_div .client_div .options li svg {
    margin-left: 8px;
    vertical-align: top;
    position: absolute;
    top: 2px;
  }
  
  
  .main_div .filter_div .client_div .options li .email {
    position: absolute;
    bottom: -5px;
    left: 70px;
    display: inline-block;
    font-weight: normal;
    color: #999;
    width: calc(99% - 69px);
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main_div .filter_div .client_div .options .temp_no_results {
    background-color: transparent;
    padding: 8px 16px;
    color: #999;
    font-size: 13px;
    font-weight: bold;
  }

  .main_div .filter_div .client_div .options .temp_no_results:hover {
    background-color: transparent;
    cursor: default;
  }
  
  
  
  
  
  /* FOLDERS */
  
  .main_div .folder_div ul.options {
    padding: 0 0 6px 0 !important;
  }
  
  
  .main_div .folder_div ul li:not(.disabled) {
    position: relative;
    height: auto;
    padding: 0 0 0 6px !important;
    margin: 0 !important;
    color: #333;
    border-radius: 0px;
    vertical-align: middle;
  }
  
  .main_div .folder_div ul li:hover {
    background-color: transparent !important;
  }
  
  .main_div .folder_div ul li ul {
    position: relative !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    list-style: none;
    border-radius: 0 !important;
  }
  
  .main_div .folder_div ul li:not(.disabled) ul li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* padding: 0 !important; */
  }
  
  .main_div .folder_div ul li span {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    white-space: normal;
    overflow: auto;
    text-overflow:inherit;
  }
  
  .folder_div .options li input[type=checkbox] {
    display: inline-block !important;
    position: relative !important;
    top: -1px !important;
    float: none !important;
    /* width: 12px;
    height: 12px; */
    margin: 0 0px 0 8px !important;
    cursor: pointer;
    vertical-align: middle;
    pointer-events: none;
  }
  
  .folder_div .options li input[type=checkbox]:checked ~ p {
    color: #268BD2;
  }
  
  .folder_div .options li input[type=checkbox]:checked ~ p span.icon {
    /* border: 1px solid #268BD2; */
    opacity: 1;
    filter: invert(50%) sepia(19%) saturate(3123%) hue-rotate(172deg) brightness(89%) contrast(84%);
  }
  
  .folder_div .options li p {
    position: relative;
    display: inline-block !important;
    vertical-align: middle;
    margin: 1px 0;
    padding: 6px 0 6px 4px;
    width: calc(100% - 48px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 8px;
  }
  
  .folder_div .options li:not(.disable) p {
    display: inline-block !important;
    border-radius: 1px;
    /* border: 1px solid transparent; */
    background-color: rgba(242, 242, 242, 0);
    width: calc(100% - 30px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .folder_div .options li:not(.create_folder) p:hover {
    cursor: pointer;
    background-color: rgba(225, 242, 255, 0.5);
    background-color: #f6f6f6;
    /* border: 1px solid #eee; */
    padding-right: 0px;
  }
  
  
  .folder_div .options li p span.dir_name {
    position: relative;
    top: -9px;
    padding-left: 6px;
    font-size: 12px;
    font-weight: bold;
  }
  
  .folder_div .options li p span.dir_path {
    position: absolute;
    top: 19px;
    left: 38px;
    font-size: 11px;
    font-weight: normal;
    color: #aaa;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 40px);
  }
  
  .folder_div .options li p span.dir_path b {
    font-weight: normal;
    color: #777;
    color: #aaa;
    margin: 0 1px;
    padding: 0 3px;
    /* background-color: rgba(225, 242, 255, 0.3); */
    border-radius: 4px;
    /* border: 1px solid rgba(225, 242, 255, 0.8); */
    border: 1px solid rgba(225, 242, 255, 0);
    border: 1px solid #ddd;
  }
  
  .folder_div .options li:not(.create_folder) p:hover span.dir_path {
    color: #888;
  }
  
  .folder_div .options li:not(.create_folder) p:hover span.dir_path b {
    color: #666;
    background-color: rgba(225, 242, 255, 0.4);
    /* border: 1px solid rgba(225, 242, 255, 1); */
    border: 1px solid rgba(214, 237, 255, 0.75);
  }
  
  
  .folder_div .options li p span.icon {
    display: none;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background: url('../../assets/organize.png');
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    opacity: 0.95;
    /* border: 1px solid #666; */
  }
  
  
  /* Collapse all nested lists by default */
  .folder_div .options li .nested_folders {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 99999;
    color: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto;
    margin: 0 0 0 16px !important;
    padding: 0;
    padding-left: 4px !important;
    border: none !important;
    box-shadow: none;
    position: relative;
    display: block !important;
    background: transparent;
    border-radius: none !important;
    border-left: 1px dashed #ccc !important;
  }
  
  /* Rotate arrow when expanded */
  .folder_div .options li span.expanded {
    transform: rotate(90deg);
  }
  
  
  
  .folder_div .options .empty_organize_folders_li {
    display: block;
    position: relative;
    left: 0;
    top: 8px;
    width: 100%;
    min-height: 80px;
    content: "You have no folders to show";
    margin: 0 auto;
    padding: 8px 8px 16px 8px !important;
    color: #999;
    text-align: center;
  }
  
  .folder_div .options .empty_organize_folders_li span {
    display: block;
    position: relative;
    top: 9px;
    width: 40px;
    margin: 0 auto;
    min-height: 40px;
    background: url("../../assets/organize.png");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.55;
  }
  
  
  .folder_div .options .empty_organize_folders_li:before {
    /* content: "Folders\A";
    white-space:pre;
    font-size: 16px;
    font-weight: bold;
    color: #aaa; */
  }
  
  .folder_div .options .empty_organize_folders_li:after {
    content: "You have no folders to show";
    font-size: 13px;
    color: #aaa;
  }

  .main_div .results_div {
    position: relative;
    display: block;
  }
  
  .main_div ul:not(.request_list) {
    position: relative;
    display: block;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
  }
  

  
  .no_results {
    border: none !important;
  }
  
  .main_div .results_div .request_list_head {
    display: none;
    position: sticky;
    top: 124px;
    z-index: 9;
    box-shadow: 0 3px 6px -2px #3332;
  }
  
  
  .main_div .results_div .request_list_head .main_request_list_head_li, .main_div .results_div .request_list_head .request_select_head .options li {
    position: relative;
    border-radius: 3px;
    border: none;
    padding: 3px 8px 9px 12px;
    margin: 0;
    height: 40px;
    cursor: pointer;
    font-size: 12px;
    background: #FDFDF8;
    /* background: #ECECE6; */
    pointer-events: none;
  }
  
  .main_div .results_div li * {
    position: relative;
    display: inline-block;
    margin: 0;
    /* border: 1px solid grey; */
  }
  
  .main_div .results_div .temp_no_results {
    padding: 24px 8px;
    margin: 32px auto 0 auto;
    color: #999;
    text-align: center;
    border: none;
    background: transparent !important;
    width: 100%;
    max-width: 700px;
  }
  
  .main_div .results_div .temp_no_results h3 {
    background: transparent url('../../assets/search-hover.png');
    background-size: 54px auto;
    background-repeat: no-repeat;
    background-position: center top;
    font-weight: bolder;
    color: #666;
    margin: 24px auto 8px auto;
    padding: 64px 0 0 0;
  }

  .main_div .results_div .temp_no_results.no_results_init h3 {
    background: transparent url('../../assets/save_icon.png');
    background-size: 64px auto;
    background-repeat: no-repeat;
    background-position: center top;
  }

  .main_div .results_div .temp_no_results h4 {
    display: block;
    margin-bottom: 3px;
    /* line-height: 1.5; */
  }

  .main_div .results_div .temp_no_results.no_results_init p .preparing {
    width: 216px;
    display: block;
    font-weight: bold;
    margin: 0 auto;
    text-align: left;
    color: #aaa;
  }

  .main_div .results_div .temp_no_results.no_results_init p .preparing:after {
    display: inline-block;
    animation: dotty steps(1,end) 1s infinite;
    content: '';
  }


  .main_div .results_div .temp_no_results p a {
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
  }
  
  .main_div .results_div .temp_no_results:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

  }
  
  
  .request_list_head .accept_action, .request_list_head .unarchive_action, .request_list_head .delete_action, .request_list_head .export_action {
    /* position: absolute !important; */
    top: 2px;
    left: 0px;
    height: 32px;
    width: 34px;
    line-height: 38px;
    padding: 0;
    margin: 0 !important;
    color: #555;
    text-align: left;
    display: inline-block;
    /* border: 1px solid #888; */
    border-radius: 50%;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    vertical-align: middle;
    text-decoration: none;
    /* box-shadow: 0 2px 2px -1px #888f; */
    /* background: #f4f4f4; */
    /* background: linear-gradient(180deg, rgba(240,240,233,1) 0%, rgba(233,233,224,1) 40%, rgba(253,253,248,1) 90%); */
  }
  
  
  .request_list_head .control_btn:hover {
    background-color: #E5E7EB;
    transition: background-color 0.25s ease-in-out;
    -webkit-transition: background-color 0.25s ease-in-out;
    /* border: 2px solid #ccc; */
    /* background: linear-gradient(180deg, rgba(240,240,233,1) 0%, rgba(233,233,224,1) 40%, rgba(253,253,248,1) 90%); */
    /* border: 1px solid #268BD2; */
    /* box-shadow: 0 2px 2px -1px #268BD2; */
    cursor: pointer;
  }
  
  .request_list_head .control_btn span {
    /* padding: 0 10px 0 32px; */
    padding: 0;
    width: 100%;
    line-height: 32px;
    height: 32px !important;
    margin: 0;
  }
  
  
  .request_list_head .accept_action span {
    background: transparent url('../../assets/checkbox_checked.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    /* filter: invert(28%) sepia(25%) saturate(779%) hue-rotate(77deg) brightness(100%) contrast(87%); */
  }
  
  .request_list_head .accept_action:hover span {
    filter: invert(28%) sepia(25%) saturate(779%) hue-rotate(77deg) brightness(100%) contrast(87%);
  }
  
  
  .request_list_head .unarchive_action span {
    background: transparent url('../../assets/unarchive.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    /* filter: invert(28%) sepia(25%) saturate(779%) hue-rotate(77deg) brightness(100%) contrast(87%); */
  }
  
  
  .request_list_head .export_action span {
    background: transparent url('../../assets/download.png');
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
  }
  
  .request_list_head .export_action:hover span {
    filter: invert(50%) sepia(19%) saturate(3123%) hue-rotate(172deg) brightness(89%) contrast(84%);
  }
  
  
  
  .request_list_head .delete_action span {
    font-weight: bolder;
    color: #fff;
    background: transparent url('../../assets/delete_icon.png');
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: center;
    /* filter: invert(17%) sepia(94%) saturate(7374%) hue-rotate(4deg) brightness(99%) contrast(118%); */
    /* filter: invert(56%) sepia(85%) saturate(595%) hue-rotate(300deg) brightness(95%) contrast(79%); */
  }
  
  .request_list_head .delete_action:hover span {
    filter: invert(56%) sepia(85%) saturate(595%) hue-rotate(300deg) brightness(95%) contrast(79%);
  }
  
  
  
  .main_div .results_div .request_list_head li p {
    margin-right: 4px;
    position: relative;
    top: 4px;
    /* display: none; */
  }
  
  .main_div .results_div .request_select_head {
    position: relative;
    margin-right: 5px;
    margin-left: 5px;
    top: 9px;
    padding-right: 12px;
    background: url('../../assets/dropdown_dark.png');
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
  }
  
  .main_div .results_div .request_select_head input[type=checkbox] {
    vertical-align: middle;
    display: inline-block;
    float: left;
    width: 18px;
    height: 18px;
    cursor: pointer;
    /* pointer-events: none; */
  }
  
  .main_div .results_div .request_select_head .options {
    display: none;
    position: absolute;
    background: #fff !important;
    top: 18px;
    left: 18px;
    right: auto;
    z-index: 99999;
    color: #333 !important;
    font-size: 14px !important;
    width: 100px;
    height: auto;
    max-height: 268px;
    overflow: hidden;
    margin: 0;
    padding: 8px 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid #bbb !important;
    border-color: transparent #bbb #bbb #bbb;
    box-shadow: 0 3px 16px -3px #0004;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .main_div .results_div .request_select_head .options li {
    position: relative;
    display: block;
    padding: 4px 12px !important;
    margin: 0 !important;
    color: #333 !important;
    border-radius: 0px !important;
    /* font-size: 14px; */
    background: #fff !important;
    height: auto !important;
  }
  
  .main_div .results_div .request_select_head .options li:hover {
    cursor: pointer;
    background: #f6f6f6 !important;
  }
  
  
  
  
  
  
  .main_div .results_div .request_name_head {
    width: calc(100% - 730px);
    /* margin-right: 10px !important; */
  }
  
  .main_div .results_div .client_info_head {
    width: 300px;
  }
  
  .main_div .results_div .sent_date_head, .main_div .results_div .due_date_head {
    width: 100px;
  }
  
  .main_div .results_div .status_head {
    width: 78px;
  }
  
  .main_div .results_div .other_details_head {
    width: 52px;
  }
  
  



  .main_div .request_list {
    display: block;
    width: 99%;
    min-height: 200px;
    margin: 0 auto;
    padding: 16px;
    list-style: none;
    grid-template-columns: 1fr;
    transition: opacity 0s ease-in-out;
  }
  

  .main_div .request_list:not(.no_results).grid_view {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
    grid-auto-rows: min-content;
    opacity: 0;
  }

  .main_div .request_list:not(.no_results).list_view {
    display: block;
    padding: 16px 16px 16px 32px;
    opacity: 0; /* Hide smoothly before switching */
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    margin: 0;
    width: calc(99% - 300px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }


  .main_div .request_list.grid_view li:not(.temp_no_results) {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* overflow: hidden; */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    min-height: 100px;
    height: auto;
    /* min-height: 200px; */
    /* max-height: 250px; */
    background-color: #F6F4F1;
    margin: 0;
    padding: 0;
  }


   

  .main_div .request_list.list_view li:not(.temp_no_results) {
    position: relative;
    display: block;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    height: auto;
    background-color: #F6F4F1;
    margin: 0 0 8px 0;
    /* padding: 6px 8px; */
    padding: 0;
  }


  .main_div .request_list.grid_view li:not(.temp_no_results):hover {
    /* transform: scale(1.02); */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #E9E7E4;
    border: 1px solid #bbb;
    /* z-index: 999999999999999999999999999999; */
  }

  .main_div .request_list.list_view li:not(.temp_no_results):hover {
    /* transform: scale(1.02); */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #E9E7E4;
    /* z-index: 999999999999999999999999999999; */
  }

  .main_div .request_list li input[type=checkbox] {
    display: block;
    position: absolute;
    left: 8px;
    top: 8px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    z-index: 9;
    box-shadow: 2px 3px 10px -3px #0007;
    /* pointer-events: none; */
    z-index: 9999;
    opacity: 0;
    transition: opacity 0s ease;
    transition-delay: 0.15s;
  }

  .main_div .request_list.list_view li input[type=checkbox] {
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    box-shadow: 0px 3px 10px -3px #0003;
  }

  .main_div .request_list.list_view li:hover input[type=checkbox] {
    box-shadow: 0px 3px 10px -3px #0006;
  }

  .main_div .request_list li:hover input[type=checkbox] {
    display: block;
    opacity: 1;
  }

  .main_div .request_list.grid_view li input[type=checkbox]:checked {
    display: block;
    opacity: 1;
    outline: 1px solid #fff;
  }

  .main_div .request_list.list_view li input[type=checkbox]:checked {
    display: block;
    opacity: 1;
    box-shadow: 0px 3px 10px -3px #0007;
  }

  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a {
    border-color: #268BD2;
    background-color: #E1F2FF;
  }
  
  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_preview {
    /* border-color: #268BD2; */
    background-color: #cde1f1;
  }
  
  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_name {
    color: #268BD2;
  }

  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_timestamp {
    color: #268BD2;
  }

  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_size {
    color: #268BD2;
  }
  
  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_preview {
    background-color: #268BD2;
  }
  
  .main_div .request_list.list_view li input[type=checkbox]:checked ~ a .file_preview.no_thumbnail {
    background-color: #268BD2;
  }

  .main_div .request_list.grid_view li input[type=checkbox]:checked ~ a {
    background-color: #268BD2;
  }
  

  .main_div .request_list.grid_view li .file_link {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px;
  }

  .main_div .request_list.list_view li .file_link {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    text-decoration: none;
    border: 1px solid #ccc;
  }

  .main_div .request_list.list_view li .file_link:hover, .main_div .request_list.list_view li .file_link:focus {
    text-decoration: none;
  }


  .main_div .request_list.grid_view li .file_preview {
    flex: 1;
    position: relative;
    width: 90%;
    height: 90%;
    margin: 5% 5%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }

  .main_div .request_list.list_view li .file_preview {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 4px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: #FDFDF8;
    border: none;
    border-radius: 0;
  }


  .main_div .request_list li .file_preview img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    pointer-events: none;
  }

  .main_div .request_list.list_view li .file_preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  

  .main_div .request_list li .file_preview.pdf_preview {
    background: transparent;
  }


  .main_div .request_list li .file_preview.no_thumbnail {
    /* width: 100%;
    height: 100%; */
    background: transparent url('../../assets/file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.img_preview.no_thumbnail {
    /* width: 100%;
    height: 100%; */
    background: transparent url('../../assets/image_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  /* .main_div .request_list li .file_preview.img_preview.no_thumbnail:after {
    position: absolute;
    top: 0;
    right: 12px;
    content: "⚠️";
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
  } */

  .main_div .request_list li .file_preview.img_preview.no_thumbnail img {
    display: none;
  }

  .main_div .request_list li .file_preview.pdf_preview {
    background: transparent url('../../assets/pdf_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.zip_preview {
    background: transparent url('../../assets/zip_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.video_preview {
    background: transparent url('../../assets/video_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.audio_preview {
    background: transparent url('../../assets/audio_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.drawing_preview {
    background: transparent url('../../assets/design_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.document_preview {
    background: transparent url('../../assets/document_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.word_document_preview {
    background: transparent url('../../assets/word_document_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list li .file_preview.spreadsheet_preview {
    background: transparent url('../../assets/sheet_file.png');
    background-size: 60%;
    background-position: center calc(50% - 25px);
    background-repeat: no-repeat;
  }

  .main_div .request_list.list_view .file_preview {
    background-position: center calc(50% - 0px) !important;
  }


  .main_div .request_list.list_view li .file_preview.no_thumbnail {
    background-color: #FDFDF8;
  }


  .main_div .request_list li .file_preview .content_ext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, calc(-50% - 24px));
    content: "";
    display: none;
    text-align: center;
    width: auto;
    height: auto;
    font-size: 16px;
    text-align: center;
    line-height: 1;
    /* font-family: "Arial Black", Gadget, sans-serif; */
    font-weight: bold;
    /* letter-spacing: 2px; */
    color: #426071;
    background-color: #D0D9DE;
    border-radius: 4px;
    border: 2px solid #719eb8;
    padding: 3px 8px;
    box-shadow: 4px 3px 10px -3px #0006;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: left 0.25s ease, box-shadow 0.35s ease;
  }


  .main_div .request_list li:hover .file_preview .content_ext {
    box-shadow: 4px 3px 12px -3px #0009;
    left: 52%;
  }

  
  .main_div .request_list li:hover .file_preview .content_ext {
    color: #07344a;
  }

  .main_div .request_list li:hover .file_preview.pdf_preview .content_ext {
    color: #cc0000;
  }

  .main_div .request_list li .file_info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    z-index: 1; /* Ensure info appears above preview */
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .main_div .request_list li:hover .file_info {
    background: rgba(0, 0, 0, 0.7);
  }

  .main_div .request_list li .file_info .more_options {
    display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 9;
    background: url('../../assets/more.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);
    opacity: 0;
    transition: opacity 0s ease;
    transition-delay: 0.15s;
    border-radius: 50%;
    border: 1px solid transparent;
  }

  .main_div .request_list li:hover .file_info .more_options {
    display: block;
    opacity: 1;
  }

  .main_div .request_list li .file_info .more_options:hover {
    /* filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%); */
    background-color: rgba(250, 250, 250, 0.15);
    /* border: 1px solid #ddd; */
  }


  .main_div .request_list.list_view li .more_options {
    display: none;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 9;
    background: url('../../assets/more.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    border-radius: 50%;
  }

  .main_div .request_list.list_view li:hover .more_options {
    display: block;
  }

  .main_div .request_list.list_view li .more_options:hover {
    background-color: rgb(229, 226, 222, 0.7);
    opacity: 1;
  }


  .main_div .request_list.list_view li .download_btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-52%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 9;
    background: url('../../assets/download.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    border-radius: 50%;
  }

  .main_div .request_list.list_view li .download_btn:hover {
    filter: invert(50%) sepia(19%) saturate(3123%) hue-rotate(172deg) brightness(89%) contrast(84%);
    opacity: 1;
  }


  .main_div .request_list li .file_info .file_name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    max-width: calc(100% - 40px);
    text-shadow: 0 1px 1px #444;
  }

  .main_div .request_list.list_view li .file_name {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 2px;
    width: calc(99% - 280px);
  }


  .main_div .request_list li .file_info .file_ext {
    position: relative;
    display: inline-block;
    font-size: 12px;
    margin: 0;
    padding: 0 12px 0 0;
    opacity: 0.8;
    max-width: 64px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main_div .request_list li .file_info .file_ext:after {
    content: ".";
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: -4px;
    right: 4px;
    padding: 0;
    margin: 0;
  }

  .main_div .request_list li .file_info .file_size, .main_div .request_list li .file_info .folder_name {
    display: inline-block;
    font-size: 12px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 64px);
  }

  .main_div .request_list.list_view li .file_size {
    display: inline-block;
    position: relative;
    font-size: 12px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main_div .request_list.list_view li .file_timestamp {
    display: inline-block;
    position: relative;
    font-size: 12px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }



  .form_integration_div {
    position: absolute;
    display: none;
    top: 48px;
    left: 150px;
    width: 400px;
    color: palevioletred;
    border-radius: 8px;
    border: 1px solid #bbb;
    padding: 0px !important;
    background-color: #fff;
    box-shadow: 0 4px 16px -3px #0003;
    z-index: 9999999999999999 !important;
    overflow: hidden;
  }


  .form_integration_div ul {
    list-style: none;
    margin: 0;
    padding: 8px;
    border: none !important;
    outline: none;
    border-radius: 8px;
  }

  .form_integration_div ul li  {
    display: block;
    border: none;
    padding: 8px 8px 8px 48px;
    margin: 0;
    color: #000;
  }
  
  .form_integration_div ul li {
    position: relative;
  }
  

  .form_integration_div ul .line_break {
    border-bottom: 1px solid #ccc;
    margin: 6px 0 8px 0;
    padding: 1px 8px;
    display: block;
  }

  .form_integration_div ul li:not(.line_break):hover {
    background-color: #f4f4f4;
    cursor: pointer;
  }

  .form_integration_div ul .line_break_txt {
    position: relative;
    margin: 8px 0 10px 0;
  }
  
  .form_integration_div ul .line_break_txt span {
    position: absolute;
    top: -6px;
    left: 0;
    padding: 0 16px;
    font-size: 12px;
    color: #999;
    background: #fff;
  }


  .form_integration_div ul .email_share {
    background: url("../../assets/email.png");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: 12px center;
  }
  
  
  .form_integration_div ul .google_drive {
    background: url("../../assets/google_drive.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 15px center;
  }
  
  .form_integration_div ul .dropbox {
    background: url("../../assets/dropbox.png");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: 14px center;
  }
  
  .form_integration_div ul .onedrive {
    background: url("../../assets/onedrive.png");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: 14px center;
    /* opacity: 0.6;
    pointer-events: none;
    cursor: no-drop !important; */
  }








  .main_div .request_list li .more_options_div, .actions_div .more_options_div {
    position: absolute;
    bottom: 24px;
    right: 10px;
    width: 300px;
    min-height: fit-content;
    height: auto !important;
    display: none;
    box-shadow: 0 3px 16px -3px #0006 !important;
    border-radius: 4px !important;
    z-index: 999999999999999999999999999999;
    background: #fff;
    border: 1px solid #cfcfcf;
    
  }

  .main_div .request_list.list_view li .more_options_div {
    min-height: fit-content;
    height: auto !important;
    overflow: visible;
  }


  .actions_div .more_options_div {
    display: block;
    top: 48px;
    bottom: auto;
    right: auto;
    left: 236px;
  }


  .main_div .request_list li .more_options_div .more_options_div_a, .actions_div .more_options_div_a {
    position: relative;
    display: block;
    padding: 6px 8px !important;
  }

  .actions_div .more_options_div_a {
    display: block;
    width: 100%;
  }

  .actions_div .more_options_div_a span {
    font-size: 14px;
    color: inherit;
  }

  .main_div .request_list li .more_options_div .more_options_div_a:first-child, .actions_div .more_options_div_a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .main_div .request_list li .more_options_div .more_options_div_a:last-child, .actions_div .more_options_div_a:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .main_div .request_list li .more_options_div .more_options_delete {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .main_div .request_list li .more_options_div .more_options_save {
    border-bottom: 1px solid #e2e2e2;
    font-weight: bold;
  }

  .main_div .request_list li .more_options_div .more_options_div_a:hover, .actions_div .more_options_div_a:hover {
    cursor: pointer;
    background-color: #f4f4f4;
  }

  .main_div .request_list li .more_options_div .more_options_div_a span, .actions_div .more_options_div_a span {
    text-decoration: none;
    color: #333;
    display: inline-block;
    position: relative;
    top: 1px;
  }

  .main_div .request_list li .more_options_div .more_options_delete span {
    color: palevioletred;
    font-weight: bold;
  }

  .main_div .request_list li .more_options_div img, .actions_div img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 6px;
    display: inline-block;
    border: none !important;
    position: relative;
    top: -1px;
  }

  .more_options_div .more_options_copy_link img {
    left: -1px;
    opacity: 0.95;
  }


  .main_div .request_list li .more_options_div p, .actions_div p {
    margin: 0;
  }
  
  .main_div .request_list li .more_options_div .more_options_rename, .main_div .request_list li .more_options_div .more_options_download, .main_div .request_list li .more_options_div .more_options_copy_link, .actions_div .more_options_download, .actions_div .more_options_copy_link {
    border-bottom: 1px solid #e2e2e2;
  }

  .main_div .request_list li .more_options_div .more_options_file_info {
    border-bottom: 1px solid #e2e2e2;
  }

  .main_div .request_list li .more_options_div .more_options_pin {
    border-bottom: 1px solid #e2e2e2;
  }

  .main_div .request_list li .more_options_div .more_options_rename img {
    padding: 7px;
    top: 0px;
  }

  .main_div .request_list li .more_options_div .more_options_pin img {
    padding: 4px;
    top: 0px;
  }

  .more_options_div .more_options_copy_link.copied {
    background: none !important;
  }
  
  .more_options_div .more_options_copy_link.copied:before {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    left: auto !important;
    right: 12px !important;
    width: auto !important;
    height: auto !important;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: block;
    background: none !important;
    content: '\2713';
    /* content: 'Copied!'; */
    color: #999;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
    animation: pulseanim 0.45s ease-in-out reverse;
  }

  .more_options_div_other .more_options_copy_link.copied:before {
    color: #eee;
  }
  
  .main_div .request_list li .more_options_div .more_options_add_to_dropbox {
    border-top: 1px solid #e2e2e2;
  }
  
  .main_div .request_list li .more_options_div .more_options_add_to_onedrive:last-child {
    border-top: 1px solid #e2e2e2;
  }

  .main_div .request_list li .more_options_div .more_options_add_to_google_drive span, .more_options_add_to_dropbox span, .more_options_add_to_onedrive span, .more_options_history span {
    padding: 0;
    margin: 0;
  }
  
  .main_div .request_list li .more_options_div .more_options_connect_app svg {
    position: relative !important;
    top: 0px;
    width: 28px;
    height: 28px;
    padding: 2px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.7;
  }
  
  .main_div .request_list li .more_options_div .more_options_add_to_google_drive svg, .more_options_add_to_dropbox svg, .more_options_add_to_onedrive svg, .more_options_history svg, .more_options_file_info svg {
    position: relative !important;
    top: 0px;
    width: 28px;
    height: 28px;
    object-fit: cover;
    padding: 4px;
    margin: 0 8px 0 0 !important;
    display: inline-block !important;
    border: none !important;
    vertical-align: middle;
    opacity: 0.55;
  }
  
  .more_options_add_to_dropbox svg {
    position: relative !important;
    top: 0px;
    left: 1px;
    margin: 0 10px 0 0 !important;
    width: 26px;
    height: 26px;
  }
  
  .more_options_add_to_onedrive svg {
    position: relative !important;
    top: 0px;
    left: -2px;
    margin: 0 4px 0 0 !important;
    width: 31px;
    height: 31px;
  }

  .more_options_file_info svg {
    position: relative !important;
    top: 0px;
    padding: 5px 4px;
    width: 28px;
    height: 28px;
    margin: 0 9px 0 0 !important;
    /* fill: #999; */
  }



  /* Download option menu for images */
.main_div .request_list li .img_and_pdf {
  background: url("../../assets/chevron-right-dark-24px.png");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
}

.more_options_div_img_to_pdf {
  position: absolute !important;
  top: 1px !important;
  bottom: auto !important;
  right: auto !important;
  left: -179px !important;
  width: 180px !important;
  border: 1px solid #cfcfcf;
  border-radius: 4px !important;
  z-index: 999999999999999999999999999999;
  background: #fff;
  box-shadow: 0 3px 16px -3px #0007 !important;
}

.file_preview_div .more_options_div_img_to_pdf {
  top: 48px !important;
  left: auto !important;
  right: 72px !important;
  background: #111;
  border: 1px solid #000;
  box-shadow: 0 3px 16px -3px #000a !important;
}


.file_preview_div .more_options_div_a img {
  width: 29px;
  height: 29px;
  object-fit: cover;
  margin-right: 7px;
  display: inline-block;
  border: none !important;
  position: relative;
  top: -1px;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);

}

.file_preview_div .more_options_div_a {
  position: relative;
  display: block;
  padding: 6px 8px !important;
  margin: 0;
  color: #fff;
}

.file_preview_div .more_options_div_a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.file_preview_div .more_options_div_a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 1px solid #333;
}

.file_preview_div .more_options_div_a:hover {
  cursor: pointer;
  background-color: #000;
}

.file_preview_div .more_options_div_a span {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  position: relative;
  top: 1px;
}


.more_options_div_img_to_pdf .more_options_download_pdf {
  /* border-top: 1px solid #e2e2e2; */
}

.more_options_div_img_to_pdf .more_options_download_pdf img {
  width: 28px;
  height: 28px;
  padding: 2px;
}

.more_options_div_img_to_pdf .more_options_download_img img {
  width: 30px;
  height: 30px;
  margin-right: 6px;
  left: -1px;
}






/* PREVIEW DIV OPTIONS MENU */
.file_preview_div .more_options_div_other {
  position: absolute !important;
  top: 48px !important;
  left: auto !important;
  right: 102px !important;
  bottom: auto !important;
  width: 300px;
  border-radius: 4px !important;
  z-index: 999999999999999999999999999999;
  background: #111;
  border: 1px solid #000;
  box-shadow: 0 3px 16px -3px #000a !important;
}

.file_preview_div .more_options_div_other .more_options_div_a {
  border-top: 1px solid #333;
}

.file_preview_div .more_options_div_other .more_options_rename img {
  padding: 7px;
  top: 0px;
}

.file_preview_div .more_options_div_other .more_options_div_a:first-child {
  border-top: none;
}


.file_preview_div .more_options_div_other .more_options_div_a svg {
  position: relative !important;
  top: 0px;
  width: 28px;
  height: 28px;
  object-fit: cover;
  padding: 4px;
  margin: 0 8px 0 0 !important;
  display: inline-block !important;
  border: none !important;
  vertical-align: middle;
  opacity: 0.9;
}

.file_preview_div .more_options_div_other .more_options_div_a svg path {
  fill: #eee !important;
}

.file_preview_div .more_options_div_other .more_options_add_to_onedrive svg path:first-child {
  fill: #aaa !important;
}

.file_preview_div .more_options_div_other .more_options_add_to_onedrive svg path:nth-child(2) {
  fill: #ddd !important;
}

.file_preview_div .more_options_div_other .more_options_add_to_onedrive svg path:last-child {
  fill: #fff !important;
}
  
.file_preview_div .more_options_div_other .more_options_add_to_dropbox svg {
  position: relative !important;
  top: 0px;
  left: 1px;
  margin: 0 10px 0 0 !important;
  width: 26px;
  height: 26px;
}

.file_preview_div .more_options_div_other .more_options_add_to_onedrive svg {
  position: relative !important;
  top: 0px;
  left: -2px;
  margin: 0 4px 0 0 !important;
  width: 31px;
  height: 31px;
}







  /* RENAME DIV */
  
.rename_div {
  position: absolute;
  top: calc(50% - 125px);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  /* left: 15%; */
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  height: 250px;
  width: 500px;
  max-width: 950px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #000;
  box-shadow: 0 3px 16px -3px #0005;
  z-index: 999999999999999999999999999999 !important;
  padding-bottom: 32px;
}

.rename_div .top_controls {
  position: relative;
  padding: 24px 8px;
  display: block;
  margin: 8px 32px;
  border-bottom: 1px solid #ccc;
}

.rename_div h2 {
  font-size: 18px;
  display: inline;
  padding-left: 32px;
  background: url('../../assets/edit.png');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left center;
}


.close_rename_div {
  position: absolute;
  top: 17px;
  right: 0;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('../../assets/close.png');
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: left center;
  margin: 0;
  opacity: 0.5;
  cursor: pointer;
}

.close_rename_div:hover {
  opacity: 1;
  cursor: pointer;
}

.rename_div input {
  display: block;
  padding: 12px 14px;
  margin: 24px 40px 16px 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: calc(100% - 80px);
  color: #000 !important;
  text-align: left !important;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  user-select: text;
  outline: none;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  box-shadow: 0 3px 8px -3px #0001;
}


.rename_div input:focus {
  border-color: #268BD2;
}

.rename_div .save_rename {
  display: inline-block;
  background: #000;
  position: relative;
  left: 40px;
  color: #fff;
  border-radius: 4px;
  padding: 8px 24px;
  margin: 0 auto;
  cursor: pointer;
}


.rename_div .save_rename.disabled {
  background: #888;
  user-select: none;
  -webkit-user-select: none;
}

.rename_div .save_rename.save_rename_loading {
  background: #fff !important;
  margin: auto;
  padding: 8px !important;
  border: 4px solid transparent !important;
  border-bottom: 4px solid #1a73e8 !important;
  border-left: 4px solid #1a73e8 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 999;
  overflow: hidden !important;
  color: transparent !important;
  animation: spin 0.45s linear infinite;
  pointer-events: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none !important;
}


.rename_div .save_rename:hover, .rename_div .save_rename:focus {
  cursor: pointer;
  text-decoration: none;
}












  /* PREVIEW DIV */

  .file_preview_div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 999999999999999;
  }

  .file_preview_div .file_preview_top_div {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 56px;
    z-index: 99999999999999999;
    background-color: rgba(0, 0, 0, 0.25);
    transition: top 0.25s ease;
  }

  .file_preview_name {
    position: absolute;
    top: 20px;
    left: 32px;
    display: inline-block;
    max-width: 50%;
    height: auto;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 1px #222;
  }


  .file_preview_close {
    position: absolute;
    top: 14px;
    right: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/close.png');
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    opacity: 0.8;
    border-radius: 50%;
    cursor: pointer;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);
  }

  .file_preview_close:hover {
    opacity: 1;
    cursor: pointer;
    background-color: rgba(250, 250, 250, 0.8);
  }


  .file_preview_more {
    position: absolute;
    top: 14px;
    right: 100px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/more.png');
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 50%;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);
  }
  
  
  .file_preview_more:hover {
    opacity: 1;
    cursor: pointer;
    background-color: rgba(250, 250, 250, 0.8);
  }


  .file_preview_download {
    position: absolute;
    top: 14px;
    right: 66px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/download.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 50%;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);
  }

  .file_preview_download:hover {
    opacity: 1;
    cursor: pointer;
    background-color: rgba(250, 250, 250, 0.8);
  }


  .file_preview_div .file_preview_content_controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    z-index: 99999999999999999;
    box-shadow: 0 3px 8px -3px #0002;
  }


  .file_preview_div .file_preview_content_controls.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }


  .file_preview_div .next_btn {
    right: 16px;
    background: rgba(0, 0, 0, 0.5) url('../../assets/chevron-right-light-24px.png');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .file_preview_div .prev_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    left: 16px;
    background: rgba(0, 0, 0, 0.5) url('../../assets/chevron-right-light-24px.png');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .file_preview_div .file_preview_content_controls:not(.disabled):hover {
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 3px 8px -3px #0005;
  }

  .file_preview_div .file_preview_content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    min-width: calc(100% - 140px);
    min-height: calc(100% - 132px);
    max-width: calc(100% - 140px);
    max-height: calc(100% - 132px);
    z-index: -1;
    text-align: center;
  }

  .file_preview_div .file_preview_content .zip_contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    margin: 0;
    border: none;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 3px 8px -3px #0005;
    user-select: none;
    background: #fff;
    overflow-y: auto;
    /* border-top: 1px dashed #ccc !important; */
  }
  
  .file_preview_div .file_preview_content .zip_contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none !important;
    box-shadow: none !important;
    text-align: left;
    padding: 0 15px;
    margin: 6px 0;
  }
  
  .file_preview_div .file_preview_content .zip_contents li.dir {
    background-image: url("../../assets/folder.png");
    background-repeat: no-repeat;
    background-position: 10px top;
    background-size: 22px;
    padding-left: 34px;
    font-weight: bolder;
  }

  .file_preview_div .file_preview_content .zip_contents li.dir ul {
    border-right: 1px solid #999;
    margin-left: -14px;
  }

  .file_preview_div .file_preview_content .zip_contents li.dir ul li ul {
    /* background: #f7f9ff; */
    margin-bottom: 1px;
  }
  
  .file_preview_div .file_preview_content .zip_contents li.dir ul li:not(.dir) {
    font-weight: normal;
    /* background: #f1f4ff; */
    /* background: #f7f9ff; */
    border-radius: 2px !important;
  }
  
  .file_preview_div .file_preview_content .zip_contents li:not(.dir) ul {
    border-bottom: none;
  }
  
  
  .file_preview_div .file_preview_content .zip_contents li.dir ul li:not(.dir):hover {
    /* background: #f7f9ff; */
  }
  
  .file_preview_div .file_preview_content .zip_contents li ul {
    padding: 0 0 0 8px;
    border: 1px solid transparent;
    border-left: 1px solid #999;
  }
  
  .file_preview_div .file_preview_content .zip_contents li ul:hover {
    /* background-color: #f7f9ff; */
  }
  
  
  .file_preview_div .file_preview_content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    box-shadow: 0 3px 8px -3px #0005;
    user-select: none;
  }

  .file_preview_div .file_preview_content img.image_content {
    object-fit: contain;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border: none;
    outline: none;
    box-shadow: 0 3px 8px -3px #0005;
    margin: 0;
    user-select: none;
  }


  .file_preview_div .file_preview_content .file_preview_content_error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    text-align: center;
    background-color: #000;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    box-shadow: 0 3px 8px -3px #0005;
  }

  .file_preview_div .file_preview_content .file_preview_content_error svg {
    margin: 16px 0;
    height: 80px;
  }

  .file_preview_div .file_preview_content .file_preview_content_error h3 {
    font-size: 23px;
    font-weight: bold;
    margin: 0;
  }

  .file_preview_div .file_preview_content .file_preview_content_error p {
    font-size: 14px;
    font-weight: bold;
    color: #999;
    margin-top: 4px;
  }
  




  /* LOADING TRAY */

  .loading_tray {
    position: fixed;
    bottom: -100%;
    right: 24px;
    width: 35%;
    max-width: 500px;
    min-height: 52px;
    z-index: 9999999999999999999999999999999;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #bbb;
    box-shadow: 0 3px 8px -3px #0008;
    transition: bottom 0.25s ease-out;
  }


  .loading_tray .loading_tray_top_div, .upload_tray .upload_tray_top_div {
    position: relative;
    display: block !important;
    width: 100% !important;
    background-color: transparent;
    cursor: pointer;
    padding: 16px 0;
    width: 100%;
    border-bottom: 1px solid #ccc;
    text-align: left;
    outline: none;
    color: #000;
  }

  .loading_tray .loading_tray_top_div.closed {
    border-bottom: none;
  }
  
  .loading_tray .loading_tray_top_div .loading_tray_title, .upload_tray .upload_tray_top_div .upload_tray_title {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    padding: 0 16px;
  }


  .loading_tray .loading_tray_top_div .loading_tray_hide, .upload_tray .upload_tray_top_div .upload_tray_hide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: url("../../assets/close.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    vertical-align: middle;
  }

  .loading_tray .loading_tray_top_div .loading_tray_hide:hover, .upload_tray .upload_tray_top_div .upload_tray_hide:hover {
    background-color: #f3f3f3;
    cursor: pointer;
  }


  .loading_tray .loading_tray_top_div .loading_tray_icon, .upload_tray .upload_tray_top_div .upload_tray_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    right: 48px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: url("../../assets/dropdown_dark.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    opacity: 0.65;
    vertical-align: middle;
    transition: transform 0.3s ease-out;
  }
  
  .loading_tray .loading_tray_top_div .loading_tray_icon:hover, .upload_tray .upload_tray_top_div .upload_tray_icon:hover {
    background-color: #e9e9e9;
    cursor: pointer;
  }
  
  .loading_tray .loading_tray_top_div.closed .loading_tray_icon, .upload_tray .upload_tray_top_div.closed .upload_tray_icon {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .loading_tray .content, .upload_tray .content {
    padding: 0 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f8f8f8;
    font-size: 15px;
    color: #444;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .loading_tray .content ul, .upload_tray .content ul {
    list-style: none;
    padding: 8px;
    margin: 0;
    min-height: 100px;
    max-height: 400px;
    overflow-y: auto;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }


  .loading_tray .content ul li, .upload_tray .content ul li {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 16px;
    margin: 8px auto;
    background: #fff;
    box-shadow: 0 4px 8px -3px #0002;
  }

  .loading_tray .content ul li .file_name, .upload_tray .content ul li .file_name {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 16px 96px 16px 0;
    margin: 0;
    width: auto;
    max-width: 99%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: bold;
  }
  
  .loading_tray .content ul .failed .file_name, .upload_tray .content ul .failed .file_name {
    color: palevioletred;
  }
  
  
  .loading_tray .content ul li .file_loading, .upload_tray .content ul li .file_loading {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 48px;
    color: #666;
    font-size: 10px;
    padding: 1px 8px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    border: 1px solid #ccc;
  }

  
  
  .loading_tray .content ul li .file_loading_icon, .upload_tray .content ul li .file_loading_icon {
    position: absolute;
    top: calc(50% - 10px);
    right: 18px;
    display: block;
    margin: auto;
    border: 2px solid transparent;
    border-bottom: 2px solid #268BD2;
    border-left: 2px solid #268BD2;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    z-index: 999;
    animation: spin 0.45s linear infinite;
  }
  

  .loading_tray .content ul li.completed .file_loading_icon, .upload_tray .content ul li.completed .file_loading_icon {
    position: absolute;
    top: calc(50% - 10px);
    right: 18px;
    display: block;
    margin: 0;
    width: 20px;
    height: 20px;
    z-index: 999;
    border-radius: 50%;
    border: 2px solid #fff;
    background: green url("../../assets/valid_light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    animation: none;
  }
  
  .loading_tray .content ul li.failed .file_loading_icon, .upload_tray .content ul li.failed .file_loading_icon {
    position: absolute;
    top: calc(50% - 10px);
    right: 18px;
    display: block;
    margin: 0;
    width: 20px;
    height: 20px;
    z-index: 999;
    border-radius: 50%;
    border: 2px solid #fff;
    background: red url("../../assets/close_light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    animation: none;
  }




  .file_info_div {
    position: fixed;
    top: 0;
    right: -400px;
    width: 364px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    z-index: 99999999999999999 !important;
    /* box-shadow: -5px 0 16px rgba(0, 0, 0, 0.15); */
    box-shadow: 1px 32px 40px -3px #0004 !important;
    transition: right 0.3s ease;
    border-left: 1px solid #bbb;
  }
  

  .file_info_div .top_controls {
    position: relative;
    padding: 16px 8px;
    display: block;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #ccc;
  }
  
  .file_info_div .top_controls svg {
    position: relative;
    top: -1px;
    display: inline-block;
    padding: 2.5px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    fill: #444;
  }
  
  .file_info_div h2 {
    font-size: 18px;
    display: inline;
    padding-left: 0;
    background: transparent;
    vertical-align: middle;
  }
  
  
  .close_file_info_div {
    position: absolute;
    top: 12px;
    right: 8px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/close.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0;
    opacity: 0.5;
    cursor: pointer;
  }
  
  .close_file_info_div:hover {
    opacity: 1;
    cursor: pointer;
  }
  
  .file_info_div .file_info_div_container {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100% - 65px);
  }


  .file_info_div .file_info_sections {
    position: relative;
    display: block;
    padding: 16px;
  }

  .file_info_div .file_info_sections .section_title {
    font-size: 16px;
    font-weight: 600;
    color: #444;
    margin-bottom: 16px;
  }

  .file_info_div .file_info_thumnail {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    padding: 0;
    overflow: hidden;
  }

  .file_info_div .file_info_thumnail:hover .file_info_thumnail_view {
    top: 10px;
  }

  .file_info_div .file_info_thumnail .file_info_thumnail_view {
    position: absolute;
    top: -50px;
    right: 10px;
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #eee url("../../assets/preview.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 9;
  }

  .file_info_div .file_info_thumnail .file_info_thumnail_view:hover {
    border-color: #268BD2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }


  .file_info_div .file_info_thumnail .file_info_thumnail_img {
    position: relative;
    display: block;
    width: 90%;
    height: 90%;
    margin: 5% 5%;
    padding: 0;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
  }


  .file_info_div .file_info_properties .file_info_properties_list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .file_info_div .file_info_properties .file_info_properties_list li {
    padding: 0;
    margin: 0 0 8px 0 !important;
    font-size: 12px;
  }

  .file_info_div .file_info_properties .file_info_properties_list li .prop_name {
    display: inline-block;
    padding: 0;
    margin: 0;
    min-width: 90px;
    color: #999;
    cursor: default;
  }

  .file_info_div .file_info_properties .file_info_properties_list li p.prop_value {
    display: inline-block;
    padding: 0;
    margin: 0 0 0 8px;
    width: calc(100% - 102px);
    min-height: 17px;
    vertical-align: middle;
    text-align: left;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .file_info_div .file_info_properties .file_info_properties_list li p.prop_value.file_info_folder.organized {
    background: url('../../assets/folder.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
  }


  .file_info_div .file_info_sections .file_info_desc_loading {
    position: absolute;
    top: 18px;
    right: 16px;
    display: block;
    margin: auto;
    border: 3px solid transparent;
    border-bottom: 3px solid #257FDF;
    border-left: 3px solid #257FDF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.45s linear infinite;
    z-index: 99999999999999999999;
  }

  .file_info_div .file_info_desc_success {
    position: absolute !important;
    bottom: 16px;
    left: 12px;
    right: 12px;
    padding: 2px 6px;
    display: block;
    margin: 0 auto;
    font-size: 12px !important;
    line-height: 20px;
    font-weight: bold;
    text-align: left;
    background: #E7FDF5;
    color: #2D7548;
    border: 2px solid #7EAF94;
    border-radius: 4px;
    box-shadow: 0 3px 16px -3px  rgba(0, 0, 0, 0.25);
    align-items: center;
    transition: bottom 0.3s ease;
  }

  .file_info_div .file_info_desc_success span {
    position: relative;
    display: inline-block;
    top: -1px;
    font-size: 14px !important;
    font-weight: bold;
    text-align: center;
    height: 20px;
    width: 20px;
    margin-right: 6px;
    border-radius: 50%;
    background: #2D7548;
    color: #fff;
    vertical-align: middle;
  }


  .file_info_div .file_info_sections textarea {
    padding: 12px 14px;
    margin: 0 0 8px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 80px;
    min-height: 80px;
    max-height: 108px;
    color: #000 !important;
    text-align: left !important;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    -ms-user-select: text;
    user-select: text;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0 3px 8px -3px #0001;
  }

  .file_info_div .file_info_sections textarea.indexing_error {
    border-color: palevioletred;
    animation: shake 0.3s linear;
    -webkit-animation: shake 0.3s linear;
  }


  .file_info_div .file_info_sections textarea:focus {
    border-color: #268BD2;
  }





  .google_drive_div, .dropbox_div, .onedrive_div {
    position: absolute;
    top: 5%;
    bottom: 5%;
    /* left: 15%; */
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    /* max-height: 90%; */
    width: 70%;
    max-width: 950px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: 0 3px 16px -3px #0005;
    z-index: 99999999999;
  }

  /* .google_drive_div.dark, .dropbox_div.dark, .onedrive_div.dark {
    background: #000;
    border: 2px solid #333;
    box-shadow: 0 3px 16px -3px #000e;
  } */


  .google_drive_div .top_controls, .dropbox_div .top_controls, .onedrive_div .top_controls {
    position: relative;
    padding: 24px 8px;
    display: block;
    margin: 8px 32px;
    border-bottom: 1px solid #ccc;
  }

  /* div.dark .top_controls {
    border-bottom: 1px solid #555;
  } */


  .google_drive_div h2 {
    font-size: 18px;
    display: inline;
    padding-left: 38px;
    background: url('../../assets/google_drive.png');
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: left center;
  }


  .dropbox_div h2 {
    font-size: 18px;
    display: inline;
    padding-left: 38px;
    background: url('../../assets/dropbox.png');
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .onedrive_div h2 {
    font-size: 18px;
    display: inline;
    padding-left: 38px;
    background: url('../../assets/onedrive.png');
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: left center;
  }


  /* div.dark .top_controls h2 {
    color: #fff;
  } */


  .close_google_drive_div, .close_dropbox_div, .close_onedrive_div {
    position: absolute;
    top: 17px;
    right: 0;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../../assets/close.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0;
    opacity: 0.5;
    cursor: pointer;
  }

  /* div.dark .top_controls .close_google_drive_div, div.dark .top_controls .close_dropbox_div, div.dark .top_controls .close_onedrive_div {
    opacity: 0.7;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(200%) contrast(103%);
  } */


  .close_google_drive_div:hover, .close_dropbox_div:hover, .close_onedrive_div:hover {
    opacity: 1 !important;
    cursor: pointer;
  }







  

  .bottom_actions {
    position: relative;
    text-align: right;
    margin-top: 0px;
    padding: 24px 8px 24px 8px;
    /* border-top: 1px solid #ccc; */
    min-height: 54px;
    /* background: #fff; */
  }

  .bottom_actions .save_task {
    background: #000;
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    border-radius: 4px;
    padding: 8px 24px;
    margin: 0 auto;
    cursor: pointer;
    user-select: none;
  }


  .bottom_actions .save_task:hover, .bottom_actions .save_task:focus {
    cursor: pointer;
    text-decoration: none;
  }


  .save_task_success {
    position: absolute;
    top: 17px;
    left: 8px;
    padding: 2px 8px 6px 12px;
    display: block;
    margin: 0 auto;
    font-size: 14px !important;
    font-weight: bold;
    text-align: left;
    background: #E7FDF5;
    color: #2D7548;
    border: 2px solid #7EAF94;
    border-radius: 4px;
    box-shadow: 0 3px 16px -3px  rgba(0, 255, 0, 0.05);
    align-items: center;
  }

  .save_task_success span {
    position: relative;
    display: inline-block;
    top: 2px;
    font-size: 18px !important;
    font-weight: bold;
    text-align: center;
    height: 24px;
    width: 24px;
    margin-right: 8px;
    border-radius: 5px;
    background: #2D7548;
    color: #fff;
  }

  .error {
    color: palevioletred;
    padding: 4px 8px;
    font-size: 12px;
  }

.bottom_actions .save_task_loading {
  background: transparent !important;
  margin: auto;
  padding: 8px !important;
  border: 4px solid transparent !important;
  border-bottom: 4px solid #1a73e8 !important;
  border-left: 4px solid #1a73e8 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  z-index: 999;
  overflow: hidden !important;
  color: transparent !important;
  animation: spin 0.45s linear infinite;
  pointer-events: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}


.bottom_controls .save_task_loading:focus, .bottom_controls .save_task_loading:hover {
  background: #fff !important;
}



  
  
   /* Google Drive Integration */


   .picker-dialog-bg {
    z-index: 99999999999 !important;
    /* overflow: hidden !important; */
    width: 100% !important;
    height: 100% !important;
  }

  .picker-dialog {
    z-index: 99999999999 !important;
  }

  @media screen and (max-width: 991px) {
   .picker.modal-dialog {
      max-width: 355px !important;
   }
   .picker.modal-dialog-content.picker-dialog-content{
       max-width: 355px !important;
   }
  }

  .google_drive_div .drive_options, .dropbox_div .drive_options, .onedrive_div .drive_options {
    display: block;
    background-image: linear-gradient(#eee 1px, transparent 1px),
      linear-gradient(90deg, #eee 1px, transparent 1px),
      linear-gradient(#fff 1px, transparent 1px),
      linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size:50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
    overflow: hidden;
    overflow-y: auto;
    padding: 24px 0 32px 0;
    margin: auto 1px;
    /* width: calc(100% - 22px); */
    height: calc(100% - 88px);
    /* outline: 2px solid red; */
  }


  /* .google_drive_div.dark .drive_options, .dropbox_div.dark .drive_options, .onedrive_div.dark .drive_options {
    display: block;
    background-image: none;
  } */




  .connectted_div {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 85%;
    padding: 40px 56px;
    list-style: none;
    border-radius: 6px;
    border: 1px solid #888;
    box-shadow: 0 3px 12px -3px #0004 !important;
    background-color: #F5F5EE;
    background-image: linear-gradient(#eee 1px, transparent 1px),
      linear-gradient(90deg, #eee 1px, transparent 1px),
      linear-gradient(#eee 1px, transparent 1px),
      linear-gradient(90deg, #eee 1px, transparent 1px);
    background-size:50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  }

  /* .dark .connectted_div {
    border: 2px solid #fff;
  } */


  .connectted_div .account_info {
    position: relative;
    display: block;
    margin: 0;
    height: auto;
    min-height: 59px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 3px 12px -3px #0004 !important;
    z-index: 99;
    border-radius: 6px;
    border: 1px solid #ccc;
    -webkit-transition: padding 0.25s ease-in-out;
      -moz-transition:    padding 0.25s ease-in-out;
      -ms-transition:     padding 0.25s ease-in-out;
      -o-transition:      padding 0.25s ease-in-out;
      transition:         padding 0.25s ease-in-out;
  }

  .connectted_div .account_info:hover {
    padding: 8px;
  }

  .connectted_div .account_info:hover .account_info_inner {
    padding: 16px;
    border-color: #bbb;
  }


  .connectted_div .account_info .account_info_inner {
    padding: 16px 16px;
    border-radius: 4px;
    border: 2px dashed rgba(242, 101, 34, 0.4);
    border-color: #bbb;
    cursor: pointer;
    min-height: 56px;
    /* width: calc(100% - 78px); */
    -webkit-transition: padding 0.25s ease-in-out, border-color 0.25s ease-in-out;
      -moz-transition:    padding 0.25s ease-in-out, border-color 0.25s ease-in-out;
      -ms-transition:     padding 0.25s ease-in-out, border-color 0.25s ease-in-out;
      -o-transition:      padding 0.25s ease-in-out, border-color 0.25s ease-in-out;
      transition:         padding 0.25s ease-in-out, border-color 0.25s ease-in-out;

  }

  .connectted_div .account_info .change {
    position: absolute;
    top: calc(50% - 21px);
    right: 26px;
    width: 62px;
    display: inline-block;
    margin: 8px 0 0 8px;
    font-size: 12px;
    padding: 4px 9px 4px 8px;
    border: 1px solid;
    border-radius: 4px;
    text-decoration: none;
  }


  .connectted_div .account_info .change_error:after {
    content: '⚠️'
  }


  .connectted_div .account_info img {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0;
    object-fit: cover;
    float: left;
    background-color: rgba(242, 101, 34, 0.5);
    /* border-top: 2px solid #c90;
    border-bottom: 2px solid #268BD2;
    border-left: 2px solid green;
    border-right: 2px solid red;
    border: 2px solid green; */
    border-radius: 2px;
    padding: 2px;
  }

  .connectted_div .account_info h5 {
    display: inline-block;
    font-weight: bold;
    width: calc(100% - 132px);
    margin: 0 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .connectted_div .account_info p {
    display: inline-block;
    width: calc(100% - 132px);
    margin: 0 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }



  .connectted_div .step_line_div {
    position: relative;
    display: block;
    background: transparent;
    top: 0px;
    width: 100%;
    text-align: center;
    z-index: 0;
    padding: 0;
    margin: 8px auto;
    opacity: 0.75;

  }

  .connectted_div .step_line_div.exporting {
    animation: pulseanim2 1.5s ease-in-out infinite;
  }

  @keyframes pulseanim2 {
    0% { opacity: 1;}
    50% { opacity: 0.3;}
    100% { opacity: 1;}
  }


  .connectted_div .step_line {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 1px;
    height: 48px;
    border-left: 2px dashed #999;
  }

  .connectted_div .step_line_div.exporting .step_line {
    border-left: 2px dashed #888;
  }


  .connectted_div .step_end_point {
    position: relative;
    display: block;
    margin: 4px auto;
    width: 16px;
    height: 2px;
    border-radius: 25%;
    background: #999;
  }

  .connectted_div .step_line_div.exporting .step_end_point {
    background: #888;
  }


  p .required_asterisk {
    color: palevioletred;
    display: inline;
  }

  .connectted_div .not_sortable {
    padding: 0 32px 0 0px !important;
  }

  .connectted_div .root_li {
    display: block;
    counter-increment: item;
    position: relative;
    padding: 0 !important;
    vertical-align: middle !important;
    border: none !important;
    margin: 0 0 16px 0;
    /* box-shadow: 0 3px 12px -3px #0004; */
  }

  .google_drive_div .connectted_div .root_li p {
    position: relative;
    display: inline-block;
    width: calc(100%);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    padding: 12px 64px 12px 34px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    /* box-shadow: 0 3px 8px -3px #0001; */
    color: #000;
    align-self: center;
    background: #fff url('../../assets/google_drive.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
  }


  .dropbox_div .connectted_div .root_li p {
    position: relative;
    display: inline-block;
    width: calc(100%);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    padding: 12px 64px 12px 34px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    /* box-shadow: 0 3px 8px -3px #0001; */
    color: #000;
    align-self: center;
    background: #fff url('../../assets/dropbox.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
  }


  .onedrive_div .connectted_div .root_li p {
    position: relative;
    display: inline-block;
    width: calc(100%);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    padding: 12px 64px 12px 34px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    /* box-shadow: 0 3px 8px -3px #0001; */
    color: #000;
    align-self: center;
    background: #fff url('../../assets/onedrive.png');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
  }

  .connectted_div .root_li .change_folder {
    position: absolute;
    top: 9px;
    right: 10px;
    display: inline-block;
    font-size: 11px;
    /* font-weight: bold; */
    padding: 6px 0;
    margin: 0;
    cursor: pointer;
    align-self: center;
    z-index: 99;
    color: #268BD2;
  }

  .connectted_div .root_li .change_folder:hover, .connectted_div .root_li .change_folder:focus {
    text-decoration: none;
    background: transparent !important;
  }

  .connectted_div .root_li .change_folder_loading {
    top: 13px;
    right: 18px;
    background: transparent !important;
    margin: auto;
    padding: 8px !important;
    border: 2px solid transparent !important;
    border-bottom: 2px solid #1a73e8 !important;
    border-left: 2px solid #1a73e8 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 999;
    overflow: hidden !important;
    color: transparent !important;
    animation: spin 0.45s linear infinite;
    pointer-events: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }






  .connectted_div .inner_filter_divs {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
  }



  .connectted_div ul {
    display: block;
    /* background: #fff; */
    top: auto;
    left: 0;
    right: 0;
    z-index: 99999;
    color: #333 !important;
    font-size: 14px !important;
    height: auto;
    max-height: 268px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    /* border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; */
    /* border: 1px solid #bbb !important; */
    /* border-color: transparent #bbb #bbb #bbb; */
    /* box-shadow: 0 3px 12px -3px #0004; */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .connectted_div ul li {
    position: relative;
    padding: 8px 12px;
    margin: 0 0 8px 0;
    color: #333;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
  }

  .connectted_div ul li.exporting {
    pointer-events: none !important;
  }

  .connectted_div ul li.done:after {
    position: absolute;
    right: 16px;
    content: "✓";
    color: green;
    font-weight: bolder;
  }


  .connectted_div ul .disabled .clear {
    position: relative;
    top: 0px;
    float: right;
    width: 32px;
    margin: 0 12px 0 0;
    font-size: 13px;
    color: #1a73e8;
    cursor: pointer;
    text-decoration: none;
  }

  .connectted_div ul .disabled {
    padding: 8px 0px 8px 12px;
    color: #999;
    font-size: 13px;
  }

  .connectted_div ul li input[type=checkbox] {
    position: relative;
    top: -1px;
    float: left;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    pointer-events: none;
    vertical-align: middle;
  }

  .connectted_div ul li.exporting input[type=checkbox] {
    display: none;
  }

  .connectted_div ul li .export_progress_loading {
    display: none;
  }

  .connectted_div ul li.exporting .export_progress_loading {
    position: relative;
    float: left;
    top: 3px;
    left: 0;
    display: block;
    margin: auto;
    border: 2px solid transparent;
    border-bottom: 2px solid #268BD2;
    border-left: 2px solid #268BD2;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    z-index: 999;
    animation: spin 0.45s linear infinite;
  }


  .connectted_div ul li span {
    position: relative;
    top: 0px;
    padding: 0 0 0 24px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .connectted_div ul .google_media span:not(.media_count_info), .connectted_div ul .dropbox_media  span:not(.media_count_info), .connectted_div ul .onedrive_media  span:not(.media_count_info) {
    background: url("../../assets/media_icon.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .connectted_div ul .google_media span .media_count_info, .connectted_div ul .dropbox_media  span .media_count_info, .connectted_div ul .onedrive_media  span .media_count_info {
    position: absolute;
    float: right;
    top: 1px;
    right: 0px;
    color: #999;
    font-size: 12px;
    width: auto;
    padding: 0;
  }

  .connectted_div ul .google_docx  span, .connectted_div ul .dropbox_docx  span, .connectted_div ul .onedrive_docx  span {
    background: url("../../assets/docx_icon.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 8px center;
  }



  .connectted_div ul li:not(.disabled):hover {
    cursor: pointer;
    color: #000;
  }


  .connectted_div ul .active span {
    /* background: #fff5; */
    color: #268BD2;
  }

  .connectted_div .options .line_break {
    border-bottom: 1px solid #ccc;
    margin: 6px 0 12px 0;
    padding: 1px 8px;
    display: block;
  }


  .connectted_div .progress_status {
    display: block;
    padding: 0;
    margin: 0;
    color: #999;
    font-size: 12px;
  }

  .connectted_div .progress_status:after {
    display: inline-block;
    animation: dotty steps(1,end) 1s infinite;
    content: '';
  }


  @keyframes dotty {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
  }




  

  .preview_note {
    position: fixed;
    top: -200px !important;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    z-index: 999999999999999999 !important;
    padding: 8px 16px 8px 40px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0 3px 8px -2px #0006;
    /* background: #E7FDF5 url("../../assets/upload.png"); */
    background: #111 url("../../assets/valid_light.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 6px 42%;
    border-radius: 8px;
    border: 2px solid #000;
    -webkit-transition: top 0.75s ease-in-out;
    -moz-transition:    top 0.75s ease-in-out;
    -ms-transition:     top 0.75s ease-in-out;
    -o-transition:      top 0.75s ease-in-out;
    transition:         top 0.75s ease-in-out;
    opacity: 0.99;
    vertical-align: middle;
  }

  .preview_note p {
    display: inline-block;
    color: #2D7548;
    color: #fff;
    width: calc(100% - 0px);
    margin: 0;
    /* font-weight: bold; */
  }

  .preview_note a {
    color: #268BD2;
    text-decoration: underline;
  }

  .preview_note a:hover {
    color: #268BD2;
  }

  .preview_note div {
    float: right;
    display: inline-block;
    width: 24px !important;
    height: auto !important;
    cursor: pointer;
    text-align: right;
    color: #888;
    font-weight: bolder;
    padding-top: 0;
  }



  

@media (max-width: 1150px) {
  .main_div .request_list:not(.no_results).grid_view {
    grid-template-columns: repeat(4, 1fr);
    /* gap: 12px; */
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    width: calc(99% - 300px);
    grid-template-columns: repeat(3, 1fr);
    /* gap: 12px; */
  }
}
  

@media (max-width: 1000px) {
  .main_div .request_list:not(.no_results).grid_view {
    grid-template-columns: repeat(3, 1fr);
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    width: calc(99% - 300px);
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 850px) {

  .logo {
    min-width: 40px;
    padding: 8px 0;
    color: transparent;
  }

  .dp {
    right: 8px;
  }

  .header_top .new {
    right: 48px;
  }

  .logo {
    left: 8px;
  }

  body {
    overflow: auto !important;
  }


  .header {
    right: 0 !important;
    width: 100%;
  }

  .header .layout {
    top: 9px;
    right: 15px;
  }

  .pages {
    top: 9px;
    right: 93px;
  }

  .main_div {
    width: 100%;
    padding: 0 16px 16px 16px;
  }

  .main_div .filter_div .inner_filter_divs {
    width: calc(33% - 13px);
  }

  .main_div .filter_div .time_div {
    margin-left: 36px !important;
    /* margin-bottom: 8px; */
  }

  .main_div .filter_div .client_div, .main_div .filter_div .folder_div {
    width: calc(50% - 21px);
    min-width: 50px;
    margin-bottom: 4px;
  }


  .main_div .filter_div .client_div .options, .main_div .filter_div .folder_div .options {
    overflow-y: auto;
    right: 0%;
  }

  .app-search {
    left: calc(50% - 200px) !important;
    width: 400px !important;
  }


  .main_div .request_list:not(.no_results).grid_view {
    grid-template-columns: repeat(3, 1fr);
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    width: calc(99% - 300px);
    grid-template-columns: repeat(1, 1fr);
  }

  .google_drive_div, .dropbox_div, .onedrive_div {
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 1%;
    width: 98%;
    transform: none;
    -webkit-transform: none;
  }

  .rename_div {
    position: absolute;
    width: 98%;
  }

  .file_history_div {
    position: absolute;
    width: 98%;
    top: calc(50% - 225px);
    height: 450px;
  }


  .save_template_div .top_controls, .client_info .top_controls, .reject_confirm_div .top_controls, .google_drive_div .top_controls, .dropbox_div .top_controls, .onedrive_div .top_controls {
    padding: 24px 6px;
    margin: 8px 16px;
  }

  .loading_tray {
    width: 60%;
  }
  
}



@media (max-width: 770px) {
  .header .stats {
    display: none;
  }

  .header_top .new {
    position: absolute;
    top: 72px;
    right: 8px;
    z-index: 99999;
    display: none;
  }
}


@media (max-width: 650px) {

  .app-search {
    left: calc(50% - 175px) !important;
    width: 350px !important;
  }

  .header .stats {
    display: none;
  }

  .main_div .request_list:not(.no_results).grid_view {
    grid-template-columns: repeat(2, 1fr);
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    width: calc(99% - 300px);
    grid-template-columns: repeat(1, 1fr);
  }

  .loading_tray {
    width: 55%;
  }

  .pages {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    text-align: center !important;
    z-index: 99999999999999999 !important;
  }

  .paginationjs-pages {
    box-shadow: 0 3px 8px -3px #0004 !important;
  }

  div.paginationjs {
    position: relative !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .paginationjs-pages ul {
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
  }
}



@media (max-width: 450px) {

  .app-search {
    left: calc(50% - 125px) !important;
    width: 250px !important;
  }

  .header_top .new {
    position: absolute;
    top: 74px;
    right: 11px;
    z-index: 99999;
    display: none;
  }

  .header_bottom {
    z-index: 99999999999999999 !important;
  }

  .header_bottom .nav_ul li:not(.active) {
    display: none;
  }

  .header_bottom .nav_ul li:first-child {
    display: inline-block;
  }





  .main_div {
    width: 100%;
    padding: 0 2px 16px 2px;
  }

  .header .layout {
    top: 9px;
    right: 15px;
  }

  .main_div .filter_div {
    padding: 15px 2px;
  }

  .main_div .filter_div .filter_div_icon {
    display: none;
  }

  .main_div .filter_div .inner_filter_divs {
    width: calc(33% - 2px);
  }

  .main_div .filter_div .time_div {
    margin-left: 0px !important;
    /* margin-bottom: 8px; */
  }

  .main_div .filter_div .client_div, .main_div .filter_div .folder_div {
    width: calc(50% - 3px);
    min-width: 50px;
    margin-bottom: 4px;
  }

  .main_div .request_list {
    width: 100%;
    min-height: 200px;
    margin: 0 auto;
    padding: 16px;
    list-style: none;
  }

  .main_div .request_list:not(.no_results).list_view {
    display: block;
    padding: 16px 8px 16px 29px;
  }

  .main_div .request_list:not(.no_results).list_view .file_timestamp {
    display: none !important;
  }

  .main_div .request_list.list_view li .file_size {
    text-align: right;
    width: 56px;
  }

  .main_div .request_list.list_view li .file_name {
    padding: 0 0 0 1px;
    width: calc(99% - 188px);
  }

  .main_div .request_list.list_view li .file_preview, .main_div .request_list.list_view li .file_preview.no_thumbnail {
    background-color: transparent;
  }

  .main_div .request_list.list_view li input[type=checkbox] {
    left: -25px;
    opacity: 0.7;
  }

  .main_div .request_list.grid_view li input[type=checkbox] {
    opacity: 1;
  }

  .main_div .request_list:not(.no_results).grid_view {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .main_div .request_list:not(.no_results).grid_view.file_info_div_opened {
    width: calc(99% - 200px);
    grid-template-columns: repeat(1, 1fr);
  }

  .file_info_div .file_info_thumnail .file_info_thumnail_view {
    top: 10px !important;
  }

  .main_div .request_list li .more_options {
    display: block !important;
    opacity: 1 !important;
  }

  .file_preview_name {
    left: 20px;
  }


  .file_preview_close {
    right: 16px;
    opacity: 0.9;
  }


  .file_preview_more {
    right: 84px;
    opacity: 0.9;
  }


  .file_preview_download {
    right: 50px;
    opacity: 0.9;
  }
    
  .file_preview_div .file_preview_content {
    min-width: calc(100% - 24px);
    height: auto;
    min-height: calc(100% - 132px);
    max-width: calc(100% - 24px);
    max-height: calc(100% - 132px);
    /* z-index: 1; */
    text-align: center;
    align-content: center;
    vertical-align: middle;
  }

  .file_preview_div .file_preview_content_controls {
    /* background-color: rgba(110, 20, 50, 1); */
    z-index: 9999999999999999999 !important;
  }

  .file_preview_div .next_btn {
    right: 10px;
  }

  .file_preview_div .prev_btn {
    left: 10px;
  }

  .file_preview_div .file_preview_content iframe {
    
  }

  .file_preview_div .file_preview_content .file_preview_content_error {
    width: calc(100% - 72px);
    height: auto;
    padding: 16px 32px;
  }

  .loading_tray {
    right: 8px;
    left: 8px;
    width: auto;
  }

  .google_drive_div, .email_share_div, .dropbox_div, .onedrive_div {
    top: 0.5%;
    bottom: 0.5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 98%;
  }

  .google_drive_div .top_controls, .dropbox_div .top_controls, .onedrive_div .top_controls, .email_share_div .top_controls, .rename_div .top_controls, .file_history_div .top_controls {
    margin: 8px 12px !important;
  }

  .rename_div input {
    margin: 24px 20px 16px 20px;
    width: calc(100% - 40px);
  }

  .rename_div .save_rename {
    left: 20px;
  }

  .connectted_div {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 94%;
    padding: 16px 16px;
  }

  .connectted_div .step_line_div {
    margin: 8px auto 24px auto;
  }

  .connectted_div .step_line {
    height: 32px;
  }

  .form_integration_div {
    width: 250px;
  }

  .actions_div .more_options_div {
    width: 186px;
  }
}