:root {
  --white: #ffffff;
  --hover: rgba(255,255,255,0.85);
  --navy: #162A31;
}
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  background-image: radial-gradient(#ffffff, #E8E8E8);
  /*background-repeat: no-repeat;*/
  min-height: 100vh;
}
html, body {
  overscroll-behavior: none;
  height: 100%;
}
/*
nav {
  height: 71px;
  background-color: #0F1F24;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrap {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav .nav-center {
  width: 100%;
  max-width: 60rem;
  display: flex;
  padding: 0 20px;
}
nav .logo-wrap a {
  display: flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-family: bree, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.04em;
}
nav .logo-wrap a svg {
  height: 24.39px;
  margin-right: 15px;
}
nav .logo-wrap a svg g path {
  fill:#1ABFA5;
}
*/
/* new nav */
nav {
  background-color: #0F1F24;
  display: flex;
  justify-content: center;
}
nav > div {
  display: flex; /* Setting the nav to be a flex container */
  justify-content: space-between; /* Pushing items to either end */
  align-items: center; /* Vertically centering items */
  padding: 0 2rem; /* Some horizontal padding for better appearance */
  color: white; /* Making text white for better contrast */
  height: 71px; /* Setting the height */
  width: 100%;
  max-width: 60rem;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding-inline-start: 0; /* maybe set this to 10px-20px? */
}

nav ul li {
    margin-left: 20px; /* Some spacing between nav items */
}

nav ul li a img {
  box-shadow: -2px 2px 4px #000000;
}
nav li a {
  font-family: adelle-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
nav li a.create-new-portal {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.35s ease-in-out;
  cursor: pointer;
}
nav li a.create-new-portal:hover {
  opacity: 1;
}
nav li a#create-portal {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  height: 37px;

  background: #F1C879;
  box-shadow: -2px 2px 4px #000000;
  border-radius: 3px;

  font-family: adelle-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */

  color: #0F1F24;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;

  white-space: nowrap;
  text-align: center;
}
img#logout {
  width: 26.72px;
  height: 15px;
  box-shadow: none;
  opacity: 0.65;
  transition: opacity 0.35s ease-in-out;
  margin-bottom: -4px;
}
img#logout:hover {
  opacity: 1;
}
.logo-container {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 34.69px;
  line-height: 34.69px;
  text-decoration: none;
}
.logo-container > img {
  width: 100%;
  height: auto;
  box-shadow: none;
}
.org-logo {
  display: flex;
  align-items: center;
  height: 44px;
}
.org-logo > img {
  max-width: 100%;
  height: 100%;
  box-shadow: none;
}
/* end new nav */

#menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 45px 0px 25px;
}
#menuleft a {
  text-decoration: none;
  margin-right: 20px;
  font-family: 'Arial';
  font-weight: normal;
  font-size: 19px;
  line-height: 12px;
  color: var(--white);
}
#menuleft a:hover {
  color: var(--hover);
}
#menuright a:not(:last-child) {
  margin-right: 50px;
}
#menuright svg {
  height: 27.44px;
  width: 27.44px;
}
#menuright svg path {
  fill: var(--white);
}
#menuright svg, #menuright svg path {
  pointer-events: none;
}
#menuright a {
  cursor: pointer;
}
#menuright a:hover svg path {
  fill: var(--hover);
}

.signup, .login {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login {
  margin-bottom: 100px;
  flex-direction: column;
  padding-bottom: 100px;
}
.signup form, .login form {
  border-radius: 7px;
  padding: 36px 32px 29px;
  margin-top: 87px;
  margin-bottom: 87px;
  color: var(--white);
  font-family: embarcadero-mvb-pro, sans-serif;
  width: 100%;
  max-width: 400px;
  background-color: var(--navy);
  background: linear-gradient(-45deg, #162a31 0%, #1f3a43 100%);
}
.signup form, .login form {
  margin-bottom: 0px;
}
.login > a {
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  text-decoration: underline;
  font-size: 18px;
  line-height: 22px;
  color: #193038;
  margin-top: 17px;
}
.signup form h3:first-child, .login form h3 {
  border-bottom: 2px solid #707070;
  width: 100%;
  margin: 0 0 20px;
  padding-bottom: 4px;
  font-family: embarcadero-mvb-pro, sans-serif;
  font-size: 24px;
  font-weight: 800;
}
.signup form h3, .login form h3 {
  font-size: 24px;
  line-height: 29px;
}
.login form.reset-pw-confirm h3 {
  margin: 0;
}
.signup form h3.we-emailed {
  margin: 0;
  border-bottom: none;
}
.signup form h3 a {
  color: #FFF;
}
.endpoint {
  display: flex;
  align-items: center;
}
.endpoint label {
  font-family: embarcadero-mvb-pro, sans-serif;
  margin-right: 2px;
  font-weight: 600;
  font-size: 17px;
}
p.welcome-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  margin: 0 0 4px;
}
p.welcome-sub {
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #C7C7C7;
  margin-top: 0;
  line-height: 17px;
}
.notification a {
  color: #FFF;
}
.signup form .field, .login form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 21px;
}
.signup form .field, .login form .full-name-field {
  display: flex;
  justify-content: space-between;
}
.full-name-field > .field {
  width: 50%;
}
/*.signup form .field, .login form .full-name-field > .field:first-child { padding-right: 20px; }*/
.login form .full-name-field > .field:first-child {
  padding-right: 20px;
}
.signup form .field label, .login form label {
  font-family: embarcadero-mvb-pro, sans-serif;
  font-weight: 800;
  font-size: 17px;
  text-align: left;
  color: var(--white);
  margin-bottom: 4px;
}
.signup form .field input, .login form .field input {
  height: 50px;
  border-radius: 7px;
  font-family: embarcadero-mvb-pro, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #162a31;
  padding: 0px 20px;
  border: 1px solid #707070;
  width: 100%;
}
.field input:disabled {
  background-color: rgba(255, 255, 255, 0.75); /* Light grey background */
}
.signup form button, .login form button {
  width: 100%;
  height: 66px;
  border-radius: 7px;
  background: #e9a86e;
  border: 1px solid #f5d891;
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  color:var(--white);
  margin-top: 10px;
  cursor: pointer;
}
.signup form button,
.login form button.first {
  margin-top: 30px;
}
section.main {
  display: flex;
  justify-content: center;
  height: 100%;
  /*background-image: radial-gradient(farthest-corner at 0% 40%,#30464e,#0a161a);*/
  /*background: linear-gradient(#30464e 0%, #0a161a 100%);*/
  background-image: radial-gradient(#30464E 0%, #0A161A 100%);
}
section.portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100% - 71px);
  box-sizing: border-box;
  font-family: proxima-nova, sans-serif;
}
section .sidebar {
  min-width: 245px;
  max-width: 245px;
  height: 100vh;
  background-color: var(--navy);
  border-right: 1px solid #707070;
}
section div.portal-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  /*padding: 58px;*/
  box-sizing: border-box;
  max-width: 60rem;
  overflow: scroll;
  padding: 0 50px 0;
}
#progress-wrap {
  position: absolute;
  bottom: 50px;
  right: 10%;
  visibility: hidden;
  opacity: 0;
  transition: 2s linear all;
  pointer-events: none;
}
#progress-wrap.uploading {
  visibility: visible;
  opacity: 1;
  transition: none;
  pointer-events: all;
}
header {
  display: flex;
  justify-content: space-between;
  min-height: 114px;
}
#portal-bc {
  display: none;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  margin: 46px 0;
}
#portal-bc a {
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  color: var(--white);
  text-decoration: none;
}
#portal-bc a:last-child {
  font-size: 18px;
  line-height: 22px;
  opacity: 1;
}
#portal-bc a:not(:first-child) {
  margin-right: 27px;
  opacity: 0.4;
  transition: all 0.25s ease-out;
}
#portal-bc a:not(:first-child):hover {
  opacity: 1;
  transition: all 0.25s ease-out;
}
#portal-bc div.bc-spacer {
  font-family: proxima-nova, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  margin-right: 27px;
  color: var(--white);
  opacity: 0.4;
}
#portal-name {
  display: flex;
  align-items: center;
  margin: 40px 0;
}
header.dont-show #portal-name {
  display: none;
}
header.dont-show #portal-bc {
  display: flex;
}
header.show #portal-name {
  display: flex;
}
header.show #portal-bc {
  display: none;
}
#portal-name .sec-level {
  display: flex;
  align-items: center;
  height: 25px;
  border: 1px solid #A2A2A2;
  border-radius: 3px;
  padding: 0 4px;
  font-family: sofia-pro, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: var(--white);
}
#portal-name .sec-level svg {
  margin-right: 4px;
}
section div.portal-wrap::-webkit-scrollbar {
  display: none;
}
#portal-name > a {
  margin: 0 10px 0 0;
  font-family: embarcadero-mvb, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: var(--white);
  text-decoration: none;
}
.portal-wrap > h2 {
  margin: 0;
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  color: var(--white);
  width: 100%;
  border-bottom: 1px solid #707070;
  padding-bottom: 2px;
}
.portal-wrap > h2:nth-of-type(2n) {
  padding-top: 20px;
}
.folders {
  display: flex;
  height: 100%;
  max-height: 50%;
  flex-wrap: wrap;
  overflow-y: scroll;
  margin-top: 20px;
}
.folders::-webkit-scrollbar {
  display: none;
}
.folder {
  position: relative;
  height: 205px;
  width: 278px;
  box-sizing: border-box;
  margin-top: 40px;
  background-image: url('/static/img/folder-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
.folder:hover {
  background-image: url('/static/img/folder-bg-hover.svg');
}
.folder > a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.inner-folder {
  position: relative;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.inner-folder a {
  pointer-events: all;
}
.file-overlay {
  width: 100%;
  height:26px;
  background-color: #22373e;
  position: absolute;
  left: 0;
  bottom: 32px;
  -webkit-mask-image: -webkit-gradient(linear, left 40%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  pointer-events: none;
  z-index: 3;
}
.folder:hover .file-overlay {
  background-color: #172c33;
}
.inner-folder > h3 {
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: var(--white);
  margin: 14px 0 0 28px;
  cursor: pointer;
  height: 100%;
  max-height: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 210px;
}
.inner-folder .file-list {
  max-width: 250px;
  height:105px;
  margin-top: 22px;
  margin: 22px 0 0 28px;
  overflow-y: scroll;
  pointer-events: all;
  display: inline-flex;
  flex-direction: column;
}
.inner-folder .file-list::-webkit-scrollbar {
  display: none;
}
.inner-folder .file-list a {
  text-decoration: none;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  margin: 0 0 8px;
  font-size: 16px;
  color: #BFBFBF;
  display: inline-flex;
  align-items: center;
  pointer-events: all;
}
.inner-folder .file-list a img {
  margin-right: 6px;
}
.folder:not(:nth-of-type(2n)) {
  margin-right: 20px;
}
.folder .folder-menu {
  margin: 0 27px;
  width: calc(100% - 54px);
  box-sizing: border-box;
  z-index: 4;
  position: absolute;
  bottom: 9px;
  left: 0;
  display: flex;
  align-items:center;
  justify-content: space-around;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-out;
}
.folder:hover .folder-menu {
  visibility: visible;
  opacity: 1;
  transition: all 0.25s ease-in;
}
.folder .folder-menu > img {
  pointer-events: all;
  cursor: pointer;
}

/*
.folder-info {
  position: absolute;
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: none;
}
.folder-info > h3 {
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  color: var(--white);
  margin: 14px 0 0 28px;
  cursor: pointer;
  height: 100%;
  max-height: 24px;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 210px;
}
.folder-info .file-list {
  width: 100%;
  height:100%;
  margin-top: 22px;
  padding: 0 28px 50px 28px;
  overflow-y: scroll;
  pointer-events: all;
}
.folder-info .file-list::-webkit-scrollbar {
  display: none;
}
.folder-info .file-list a {
  text-decoration: none;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  margin: 0 0 8px;
  font-size: 16px;
  color: #BFBFBF;
  display: flex;
  align-items: center;
  pointer-events: all;
}
.folder-info .file-list a img {
  margin-right: 6px;
}
.folder-info .file-overlay {
  width: 100%;
  min-height:70px;
  background-color: #233840;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-mask-image: -webkit-gradient(linear, left 40%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  padding-bottom: 5px;
}
.fstyle{
  fill:url(#Subtraction_3_1_);
}
.folder:hover .fstyle{
  fill:url(#Subtraction_3_2_);
}
*/
.share-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 60px;
  margin-bottom: 10px;
  margin-left: 28px;
  cursor: pointer;
}
.share-icon > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-icon > div > span {
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: var(--white);
  margin-left: 12px;
}
.edit-wrap {
  margin-right: 28px;
  margin-bottom: 5px;
  width: 39px;
  height: 39px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255,255,255,0.14);
  border-radius: 50%;
  cursor: pointer;
}
.edit-wrap span {
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 9px;
  color: var(--white);
}
.files {
  height: 100%;
  max-height: 50%;
  overflow-x: scroll;
  padding: 40px 0;
}
.files::-webkit-scrollbar {
  display: none;
}
.file {
  display: flex;
  align-items: center;
  height: 50px;
  /*justify-content: space-between;*/
  text-decoration: none;
  padding: 0 0 0 10px;
  border: 1px solid transparent;
}
.file:hover {
  border: 1px solid rgba(112,112,112, 0.07);
  background-color: rgba(255,255,255, 0.07);
  border-radius: 10px;
}
.file .file-link-wrap {
  width: 40%;
}
.file .file-menu-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}
.file .file-menu {
  width: 170px;
  box-sizing: border-box;
  z-index: 4;
  display: flex;
  align-items:center;
  justify-content: space-between;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-out;
}
.file:hover .file-menu {
  visibility: visible;
  opacity: 1;
  transition: all 0.25s ease-in;
}
.file .file-menu.fix-justify {
  justify-content: space-around;
}
.file .file-menu img {
  cursor: pointer;
}
.file a.file-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 50px;
  box-sizing: border-box;
}
.file p {
  margin:0 10px 0 10px;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #BFBFBF;
  pointer-events: none;
}
.file a.file-link:hover p {
  text-decoration: underline;
}
.file > p {
  margin:0 10% 0 0;
  text-decoration: none;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #BFBFBF;
}
/*.file img { pointer-events: none; }*/
a.file-link {
  pointer-events: all;
}
.portal-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.upload-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.upload-info > p {
  margin: 0;
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  color: var(--white);
  padding: 0 58px;
}
.upload-info > button {
  width: 100%;
  max-width: 364px;
  height: 66px;
  border-radius: 7px;
  background: #e9a86e;
  border: 1px solid #f5d891;
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  color: var(--white);
  margin-top: 10px;
  cursor: pointer;
}
.file-upload {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 364px;
  height: 66px;
  border-radius: 7px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #e3c477;
  background: linear-gradient(124deg,#e3c477 0%, #ffde8b 33%, #e9a86e 66%, #e3c477 100%);
  background: -webkit-linear-gradient(124deg,#e3c477 0%, #ffde8b 33%, #e9a86e 66%, #e3c477 100%);
  background: -moz-linear-gradient(124deg,#e3c477 0%, #ffde8b 33%, #e9a86e 66%, #e3c477 100%);
  border: 1px solid #f5d891;
  font-family: proxima-nova, sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  text-shadow: 2px 2px rgba(0,0,0,0.2);
}
.file-upload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  height: 100%;
}

.fileUpload {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  height: 57px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed #707070;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Soleil Book';
  font-weight: 500;
  font-size: 14px;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.file-upload-btn {
  position: relative;
}
.file-upload-btn input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  height: 100%;
}

p.info-text {
  font-family: 'Soleil Book';
  font-weight: 500;
  font-size: 14px;
}
.security-level {
  width: 100%;
  min-height: 76px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 7px;
  border: 2px solid transparent;
  opacity: 0.4;
  padding: 4px 0;
}
.security-level.selected, .security-level:hover {
  border: 2px solid #e7c36a;
  opacity: 1;
}
.security-level > img {
  margin-left: 10px;
  pointer-events: none;
}
.security-level > div {
  margin: 0 20px;
  pointer-events: none;
}
.security-level > div h4 {
  font-family: sofia-pro, sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 20px;
  margin: 0 0 4px;
  pointer-events: none;
}
.security-level > div p {
  font-family: embarcadero-mvb-pro, sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 16.5px;
  margin: 0;
  pointer-events: none;
}
.hidden {
  display: none;
}
#add-new {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#add-new a#add-new-btn img:first-child {
  display: block;
}
#add-new.reveal a#add-new-btn img:first-child {
  display: none;
}
#add-new a#add-new-btn img:nth-child(2) {
  display: none;
}
#add-new.reveal a#add-new-btn img:nth-child(2) {
  display: block;
  bottom: -8.2px;
  position: relative;
}
a#add-new-btn {
  cursor: pointer;
}
#add-new-dropdown {
  display: none;
}
#add-new.reveal #add-new-dropdown {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: absolute;
  top: 175px;
  z-index: 9;
}
#add-new-dropdown > div {
  font-family: embarcadero-mvb-pro, sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 800;
  color: #253D45;
  cursor: pointer;
  background-image: url('/static/img/add-dropdown.svg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 163px;
  height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}
#add-new-dropdown > div > img {
  margin-right: 8px;
}
#add-new-dropdown > div#create-new-folder {
  margin-top: 16px;
}
#profile-menu {
  display: none;
  position: absolute;
  height: 300px;
  width: 100%;
  max-width: 225px;
  background-color: var(--navy);
  right: 0;
  top: 90px;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 25px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#profile-menu.open {
  display: flex;;
}
#profile-menu > span {
  position: absolute;
  top:10px;
  right: 10px;
  font-family:sans-serif;
  cursor:pointer;
  color: var(--white);
}
#profile-menu > a {
  text-decoration: none;
  color: var(--white);
}
#file-staging {
  display: none;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 10;
}
#folderModal.modal {
  padding-top: 100px; /* Location of the box */
}
#previewModal.modal {
  display: none;
  padding-top: 0;
  justify-content: center;
  align-items: center;

  background-color: rgba(22,37,42,0.98);;
}
#previewModal.modal.show,
#shareModal.modal.show,
#renameModal.modal.show,
.modal.show  {
  display: flex;
}
#renameModal.modal.show #rename-folder-name {
  display: none;
}
#renameModal.modal.show #rename-file {
  display: flex;
}
#renameModal.modal.show.is-folder #rename-folder-name {
  display: flex;
}
#renameModal.modal.show.is-folder #rename-file {
  display: none;
}
#previewModal.modal .preview-nav {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  pointer-events: none;
}
#previewModal.modal .preview-nav svg {
  pointer-events: all;
  cursor: pointer;
  fill:#8a9294;
  width: 31.67px;
  height: 31.67px;
  visibility: hidden;
}
#previewModal.modal .preview-nav svg.show {
  visibility: visible;
}
#previewModal.modal .preview-nav svg.show g,
#previewModal.modal .preview-nav svg.show g path {
  pointer-events: none;
}
#previewModal.modal .preview-nav svg:hover g path{
  fill: var(--white);
}
.preview-title {
  display: flex;
  align-items:center;
}
.preview-title img {
  width: 23.15px;
  height: 27.01px;
}
.preview-title span#preview-filename {
  color: var(--white);
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  margin-left: 7px;
}
a#preview-download {
  position: absolute;
  right: 5%;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  top: 16px;
  width: 206px;
  height: 100%;
  box-sizing: border-box;
  max-width: 16%;
}
a#preview-download img {
  width: 100%;
  height: auto;
}
#previewModal.modal.show.no-preview .preview-wrap .preview-header a#preview-download {
  display: none;
}
a#no-preview-download {
  display: flex;
  align-items: flex-start;
  width: 206px;
  height: 100%;
  box-sizing: border-box;
  max-width: 16%;
}
.preview-wrap {
  height: 100%;
  width: 100%;
}
.preview-header {
  height: 10%;
  box-sizing:border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.preview-content {
  height: 80%;
  width: 100%;
  box-sizing:border-box;
  margin-bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#previewModal.modal.show.no-preview .preview-content {
  height: auto;
}
#previewModal.modal.show.no-preview .preview-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.preview-content > img {
  height: 100%;
  width: auto;
  position: relative;
}
.preview-content svg#close-preview {
  margin: -30px -29.91px 0 0;
  cursor: pointer;
  z-index: 4;
  width: 29.91px;
  height: 29.91px;
  animation: fadeIn 3s;
}
#previewModal.modal.show.no-preview .preview-content > img {
  display: none;
}
#previewModal.modal.show.no-preview .preview-content #no-preview-available {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#previewModal.modal.show.no-preview .preview-content #no-preview-available a#no-preview-download > img {
  width: 206px;
  height: 60px;
}
#previewModal.modal.show .preview-content #no-preview-available{
  display: none;
}
#previewModal.modal.show.no-preview .preview-content #no-preview-available h2{
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  color: var(--white);
  margin: 44px 0 58px;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #070707;
  width: 432px;
  height: 237px;
  border-radius: 10px;
  position: relative;
}
#shareModal.modal .modal-content {
  height: auto;
  max-height: 363px;
}
#deleteModal .modal-content {
  height: 176px;
  max-height: 223px;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 17px;
  right: 17px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-content > form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#share-modal-url {
  height: 41px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #d0d0d0;
  margin: 0 36px 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
}
#share-modal-url > p {
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #575757;
  max-width: 266px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
#share-modal-url > img {
  cursor: pointer;
}
#share-modal-url > input {
  display: none;
}
.share-modal-pw {
  display: flex;
  align-items: center;
  /*margin: 0 36px 28px;*/
}
.share-modal-pw label {
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #203238;
  margin: 0 13px 24px 36px;
}
.input_wrapper{
/*  width: 30px;
  height: 18px;*/
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  flex-wrap: wrap;
}
.input_wrapper input[type="checkbox"] {
  width: 24px;
  height: 12px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: rgba(173,195,203, 0.22);;
  border-radius: 3px;
  position: relative;
  outline: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
  margin: 0 0 24px 0;
  padding: 0;
}
.input_wrapper input[type="checkbox"]:before{
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  content: '';
  border: 1.3px solid #ADC3CB;
  z-index: 9;
  border-radius: 3px;
}
.input_wrapper input[type="checkbox"]:after{
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 12px;
  height: 12px;
  background: #ADC3CB;
  z-index: 2;
  border-radius: 3px;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.input_wrapper input[type="checkbox"]:checked:after{
  left: calc(100% - 12px);
  background: #273C44;
}
.input_wrapper input[type="checkbox"]:checked::before{
  border-color: #273C44;
}
.toggle-text:after {
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: #adc3cb;
  margin-left: 8px;
  content: "Off";
  top: 4px;
  position: absolute;
}
.share-pw {
  display: none;
  flex-direction: column;
  width: 100%;
  margin-bottom: 26px;
}
.share-pw label {
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #203238;
  margin: 0 36px 5px;
}
.share-pw input {
  height: 41px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #d0d0d0;
  padding: 0 11px;
  font-family: proxima-nova, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  color: #575757;
  margin: 0 36px;

}
.input_wrapper input[type="checkbox"]:checked ~ .share-pw {
  display: flex;
}
.input_wrapper input[type="checkbox"]:checked + .toggle-text:after{
  content: "On";
  color: #273C44;
}
.input_wrapper input[type="checkbox"] ~ .modal-bottom > input[type='submit']#only-copy {
  display: flex;
}
.input_wrapper input[type="checkbox"]:checked ~ .modal-bottom > input[type='submit']#only-copy {
  display: none;
}
.input_wrapper input[type="checkbox"] ~ .modal-bottom > input[type='submit']#save-and-copy {
  display: none;
}
.input_wrapper input[type="checkbox"]:checked ~ .modal-bottom > input[type='submit']#save-and-copy {
  display: flex;
}
.modal-content > form > h3 {
  font-family: proxima-nova, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #203238;
  margin: 0;
  padding: 30px 0 0 30px;
}
.modal-content > form > .share-modal-title {
  display: flex;
  align-items: center;
  /*padding: 28px 36px 0 36px;*/
  margin: 28px 36px 33px 36px;
}
#inviteModal .modal-content > form > .share-modal-title {
  margin: 38px 36px 0px 36px;
}
#deleteModal .modal-content > form > .share-modal-title {
  justify-content: center;
  margin: 38px 36px 19px 36px;
}
#deleteModal.modal.show .modal-content #delete-modal > p {
  display: none;
}
#deleteModal.modal.show.is-folder .modal-content #delete-modal > p {
  text-align: center;
  margin: 0 36px 20px;
  color: #C30000;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: inline-block;
}
.modal-content > form > .share-modal-title h3 {
  font-family: proxima-nova, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #203238;
  margin: 0 12px 0 0;
}
.modal-content > form > .share-modal-title.is-folder h3 {
  margin: 0 6px 0 0;
}
.modal.show .modal-content > form > .share-modal-title h3 span {
  display: none;
}
#deleteModal.modal.show .modal-content > form > .share-modal-title h3 {
  margin: 0 6px 0 0;
}
#deleteModal.modal.show.is-folder .modal-content > form > .share-modal-title h3 span {
  display: inline-block;
}
#deleteModal.modal.show.is-folder .modal-content > form > .share-modal-title h3 span#delete-folder-title::after {
  content: " folder?";
}
.modal-content > form > .share-modal-title img {
  margin-right: 4.5px;
}
.modal-content > form > .share-modal-title.is-folder img {
  display: none;
}
#deleteModal.modal.show.is-folder .modal-content > form > .share-modal-title img,
#deleteModal.modal.show.is-folder .modal-content > form > .share-modal-title > p {
  display: none;
}
.modal-content > form > .share-modal-title p {
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 24px;
  color: #203238;
  margin: 0;
}
#deleteModal.modal.show .modal-content > form > .share-modal-title p::after {
  font-family: proxima-nova, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #203238;
  margin-left: 2px;
  content: "?";
}
.modal-content > form > .share-modal-title.is-folder p {
  font-style: normal;
}
.create-folder-field,
.rename-folder-field,
.invite-field {
  display: flex;
  align-items: center;
  margin: 0 30px;
}
.create-folder-field label {
  margin-right: 10px;
  white-space: nowrap;
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color:#395058;
}
.create-folder-field input,
.rename-folder-field input,
.invite-field input {
  width: 100%;
  height: 41px;
  box-sizing: border-box;
  border: 1px solid #D0D0D0;
  border-radius: 5px;
  padding: 0 11px;
}
.rename-folder-field input {
  margin: 0 10px;
}
.modal-bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #C2CCD0;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px 30px;
  width: 100%;
}

.modal-bottom > input[type='submit'] {
  width: 142px;
  height: 31px;
  background: url(/static/img/create-folder-btn.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  outline: none;
  cursor: pointer;
  justify-content: center;
  font-family: embarcadero-mvb-pro, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 18px;
  color: #253d45;
}
#deleteModal .modal-bottom > input[type='submit'] {
  background: url(/static/img/delete-btn.svg);
  color: var(--white);
  width: 92px;
}
.modal-bottom > .cancel {
  width: 142px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: proxima-nova, sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #395058;
  cursor: pointer;
}

/* start new shtuff */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  font-size: 24px;
  padding: 4rem 2rem;
  /*height: 523px;*/
  background: radial-gradient(101.48% 610.48% at 0.53% 1.53%, #F2FFFD 0%, #C2EDE6 54.69%, #7CE1D1 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.hero-container {
  width: 100%;
  max-width: 48.875rem;
}
.responsive-image {
  width: 100%; 
  height: auto; 
}
section.info {
  display: flex;
  justify-content: center;
}
section.info > div {
  width: 100%;
  max-width: 48.875rem;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
section.info > div h1 {
font-family: adelle-sans, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 42px;
/* identical to box height */
text-align: center;
color: #000000;
margin-bottom: 2rem;
}

.dialog {
  display: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 71px;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  justify-content: center;
}

.modal-wrap {
  background-color: #fff;
  margin-top: 15%;
  padding: 5px;
  box-sizing: border-box;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 338px;
  height: 243px;
  border-radius: 10px;
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
#login-modal .modal-wrap {
  height: 320px;
}
.modal-wrap > .modal-contain {
  background-color: #193038;
  flex-grow: 1;
  border-radius: 5px;
  border: 0.8px solid #707070;
  box-sizing: border-box;
  padding: 0 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-wrap > .modal-contain > div > h1 {
  font-family: adelle-sans, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 25px;
  color: #FFF;
  border-bottom: 1.59805px solid #707070;
  flex-grow: 1;
  margin: 0 0 23px;
  padding-bottom: 2px;
}
.dialog .modal-wrap .modal-contain form {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.dialog .modal-wrap .modal-contain form label {
  font-family: adelle-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13.5834px;
  line-height: 18px;
  color: #FFF;
}
#login-modal > div > div > div > form > label:nth-child(3) {
  margin-top: 19px;
}
.dialog .modal-wrap .modal-contain form input[type="text"],
.dialog .modal-wrap .modal-contain form input[type="email"],
.dialog .modal-wrap .modal-contain form input[type="password"] {
  outline: none;
  border: 0.8px solid #707070;
  height: 41.55px;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 0 10px;
}
.dialog .modal-wrap .modal-contain form input[type="password"] {

}
.dialog .modal-wrap .modal-contain form input[type="submit"] {
  background: linear-gradient(137.93deg, #E3C477 -132.27%, #FFDE8B -25.05%, #E9A86E 66.1%, #E3C477 139.85%);
  border: 0.8px solid #F5D891;
  font-family: adelle-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 19.1766px;
  line-height: 25px;
  color: #FFFFFF;
  margin-top: 23px;
  height: 47.94px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.create-new-portal,
img#create-new-portal {
  cursor: pointer;
}
.option-container {
  display: flex;
  /*margin-bottom: 10px;*/
  padding: 10px;
  width: 100%;
}
.option-container:hover {
  background-color: rgba(0,0,0,0.15);
}
.option {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  flex-direction: column;
}

.rectangle {
  background-color: #e0e0e0;
  padding: 10px;
  margin-right: 20px;
  min-width: 100px;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  color: #5F5F5F;
}
.option-description {
  flex-grow: 1; /* Takes up remaining space */
  text-align: left;
  color: #fff;
  font-size: 13px;
}
input[type="radio"] {
  display: none; /* Hide the radio button */
}
input[type="radio"]:checked + label .rectangle,
.option-container:hover .rectangle {
  background-color: #5F5F5F;
  color: #fff;
}
.form-container {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0; /* Start with hidden forms */
  display: none; /* Ensure forms do not take space when hidden */
  transition: opacity 0.5s; /* Smooth transition for opacity */
}
/* Specific styles to ensure the form is visible and faded in */
.visible {
  display: flex;
  opacity: 1;
}
form#select-security-level {
  opacity: 0;
  transition: opacity 0.5s;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
form#select-security-level.vis {
  opacity: 1;
  pointer-events: all;
}

@media screen and (min-width: 40rem) {
  .logo-container > img {
    width: 164.88px;
    height: 44.66px;
  }
  section.info > div {
    flex-direction: row;
  }
  section.info > div h1 {
    margin-bottom: 0;
  }
  .option {
    flex-direction: row;
  }
}
@media screen and (min-width: 48.875rem) {
  .hero {
    padding: 4rem 0;
  }
  section.info > div {
    padding: 4rem 0;
  }
}
@media screen and (min-width: 60rem) {
  nav > div {
  padding: 0;
  }
}
/* end new shtuff */

@media (min-width: 60rem) {
  /*
  nav .nav-center {
    padding: 0;
  }
  */
  nav > div {
    padding: 0;
  }
  section div.portal-wrap {
    padding: 0;
  }
  .folder:not(:nth-of-type(2n)) {
    margin-right: 0px;
  }
  .folder:not(:nth-of-type(3n)) {
    margin-right: 20px;
  }
}
@media (min-width: 65rem) {
  a#preview-download {
    max-width: 100%;
    top: 0;
    align-items: flex-end;
  }
  a#no-preview-download {
    max-width: 100%;
    align-items: flex-end;
  }
}