/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
  /* new colors */

  --clr-dark:  rgba(22, 22, 29, 0.927);
  --clr-module: rgba(34, 34, 34, 0.98);
  --clr-medium :rgba(26, 26, 26, 0.57);
  --clr-lighter: rgb(177, 173, 169);
  --clr-light: rgb(227,228,229);
  --clr-white: rgb(249, 249, 249);
  --clr-border: rgb(211, 209, 207);
  
  --clr-background: rgba(244, 243, 243, 0.97);
  --clr-background-2: rgba(236, 236, 236, 0.927);
  --clr-background-3: rgba(211, 209, 207, 0.927);
  --clr-background-4: rgba(211, 209, 207, 0.927);

  --clr-orange:rgba(231, 215, 79, 0.809);
  /* --clr-green:rgb(122,171,97); */
  --clr-green: rgba(70, 169, 57, 0.809);
  --clr-accent: oklch(0.7 0.24 38 / 0.927);
  --clr-accent: rgba(235, 174, 32, 0.927);
  --clr-accent: rgba(215, 156, 18, 0.927);
  --clr-user:oklch(0.7021 0.0985 209.24 / 0.809);
    --clr-user-light:oklch(0.7021 0.0985 209.24 / 0.209);


  --clr-accent-light: rgba(222, 187, 105, 0.927);

  --clr-secondary:rgba(120, 93, 32, 1);
  --clr-secondary-light:rgba(249, 227, 170, 1);

  --clr-tertiary:rgba(118, 90, 126, 1);
  --clr-tertiary-light: rgba(246, 225, 253, 1);


  --clr-button: rgba(0, 0, 0, 0.1);

  --shadow-button: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;

  --clr-line:  rgba(234, 234, 234, 0.636);
  --clr-accent-light: rgba(237, 108, 45, 0.2);

  --clr-nav: rgba(175, 181, 185, 1);
  
  /* colors */
  --clr-wave: rgba(22, 22, 29, 0.927);
  --clr-progress: rgba(22, 22, 29, 1);
  /* --clr-progress: rgba(132, 124, 106, 0.927); */

  
  
  --clr-green-light: rgba(122,171,97,0.3);
  --clr-grey-blue: #AFCBD1;
  --clr-blue: rgba(101, 137, 156, 1);
  --clr-dark-blue: oklch(0.6454 0.1234 213.12 /  57%) ;
  --clr-cursor: #3C8BA5;
    --clr-cursor: oklch(0.7021 0.0985 209.24 / 0.809);
  
  --clr-backlight-on: rgba(44, 37, 4, 0.23);   
  --clr-backlight-off: rgba(255, 255, 255, 0.72);  
  --clr-glass: rgba(66, 66, 68, 0.01);
  --clr-shadow: rgba(255, 255, 255, 0.328);
  --clr-shadow2: rgba(19, 24, 18, 0.23);

   /* sizes */
  --rem-900: 8rem;
  --rem-800: 5.65258429rem;
  --rem-700: 4rem;
  --rem-600: 2.82714594rem;
  --rem-550: 3.08rem;
  --rem-500: 2.8271459rem;
  --rem-400: 2rem;
  --rem-350: 1.414rem;
  --rem-100: 0.707rem;
  


  --fs-900: 8rem;
  --fs-800: 5.65258429rem;
  --fs-700: 4rem;
  --fs-600: 3.51rem;
  --fs-550:  2.82714594rem;
  --fs-500: 2.82714594rem;
  --fs-400: 2rem;
  --fs-350: 1.414rem;
  --fs-300: 1rem;

  --fs-241: 1.21604rem;
  --fs-200: 0.86rem;
  --fs-100: 0.707rem;



  --transition: 0.3s;


  /* font-families */

 
  /* --ff-serif: "Bellefair", serif; */
  --ff-sans-cond: "Barlow Condensed", sans-serif;
  --ff-sans-normal: "Avenir", "Montserrat", "Corbel", 'URW Gothic', "source-sans-pro", sans-serif;
  --ff-serif: "Baskerville", "Baskerville Old Face", "Hoefler Text", "Garamond", "Times New Roman", serif;



  /* border style */
  --border-radius: var(--rem-100);
  /* --border-radius: 0.57rem; */
  --border-radius-hover: 1rem ;
  
  --border-radius-500: var(--rem-500);
  --border-radius-500-hover: 3rem;
  --border-radius-400: var(--rem-400);
  --border-radius-350: var(--rem-350);
  --border-radius-50: 0.245rem;
  

}




/* ------------------- */
/* Reset               */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    font-family: var(--ff-sans-normal);
    font-size: var(--fs-300);
    color: var(--clr-dark);
    
    
  }

  /* Apply to all elements */
  * {
    scrollbar-width: thin; /* Firefox */
  }

  /* WebKit browsers */
  *::-webkit-scrollbar {
    width: 8px; /* Change the width as needed */
  }



  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
      
  overflow-anchor: none;
    /* font-size: 16px; */
  }

 
  a {
    text-decoration: none; 
  }

  /* Remove default margin in favour of better control in authored CSS */
  body, h1, h2, h3, h4, p,
  figure, blockquote, dl, dd {
    margin-block-end: 0;
  }


  p, a, button {
    font-weight: 400;
    margin: 0;
    line-height: 1.43;
    /* text-wrap: balance; */
  }

  b {
    font-weight: 400;
  }


  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  /* ul[role='list'],
  ol[role='list'],
  li  {
    list-style: none;

  } */

  /* Set core body defaults */

  body, html {
    position: relative;
    /* line-height: 1.755; */

    
    margin: 0 auto;
    padding: 0;
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
    /* overflow-x: hidden;
    overflow: auto !important; */
  }

  body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 1111px;
    /* background-image: url('/static/bg/background.png'); 
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto; */
    /* opacity: 0.57;  */
    z-index: -1;
    background-color: var(--clr-background);
}

  body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1, h2, h3, h4, h5, h6
 {
    margin: 0;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.02em;
  }



  button, input, label {
    /* line-height: 1.33333; */
    line-height: 1;
    /* letter-spacing: .2vw; */
  }


  label {
    font-weight: 200;
  }

  /* Balance text wrapping on headings */
  h1, h2,
  h3, h4 {
    text-wrap: balance;
  }


  h1 {
    font-size: var(--fs-700);
    letter-spacing: -0.02em;
    }
  
  h2 {
    font-size: var(--fs-600);
  }

    h3 {
    font-size: var(--fs-350);
  }
      h4 {
     font-size: var(--fs-500);
  }

    h5 {
     font-size: var(--fs-500);
  }

  h6 {
     font-size: var(--fs-350);
  }


  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  input, button,
  textarea, select {
    font-family: inherit;
    font-size: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }


  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }

  

.text-center {
  text-align: center;
}





.glass {
  
    isolation: isolate;
    --glass-blur: 7.2px; /* Apple uses much higher blur for depth */
    --glass-opacity: 0.8; /* Liquid glass is often more transparent */
    --glass-border: rgba(255, 255, 255, 0.1);
}

.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

   

    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    pointer-events: none;

    /* important for shape consistency */
    border-radius: inherit;

        /* ADD: Apple's 'Refraction' feel */
    backdrop-filter: blur(var(--glass-blur)) saturate(180%); 
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    
    /* ADD: Dynamic tinting (picks up background colors better) */
    background: color-mix(in srgb, var(--clr-background), transparent calc(100% - (var(--glass-opacity) * 100%)));

    transform: translateZ(0);
    
}

.gloss {
    isolation: isolate;
    --glass-blur: 3.2px; /* Apple uses much higher blur for depth */
    --glass-opacity: 0.96; /* Liquid glass is often more transparent */
    --glass-border: rgba(255, 255, 255, 0.1);
}

.gloss::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

   

    border: 1px solid var(--glass-border);
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    pointer-events: none;

    /* important for shape consistency */
    border-radius: inherit;

        /* ADD: Apple's 'Refraction' feel */
    backdrop-filter: blur(var(--glass-blur)) saturate(180%); 
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    
    /* ADD: Dynamic tinting (picks up background colors better) */
    background: color-mix(in srgb, var(--clr-background), transparent calc(100% - (var(--glass-opacity) * 100%)));
}

  
/* ------------------- */
/* Reset               */
/* ------------------- */



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}




button {
  border: none;
  background: none;
  cursor: pointer;
  gap: 0.57rem;
}

a:hover {
color: hsl(from var(--clr-dark) h s l / calc(4 / 7));
cursor: pointer;
}

/* common classes */

svg {
fill: var(--clr-medium);

}

.underline {
  text-decoration: underline;
}


#entry {
background-color: var(--clr-accent);

height: 0.43rem;
height: 1px;

width: auto;

top: calc(43vh - 6rem);
position: sticky;
z-index: 5;

}



.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;

  visibility: hidden;

}


.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

/* Initial state */
.fade {
opacity: 1;
transition: opacity 0.23s ease-in-out;
}

/* Out transition when swapping (fading out) */
.htmx-swapping.fade {
opacity: 0;
}

/* In transition when settling (fading in) */
.htmx-settling.fade {
opacity: 1;
}



/* Core  */
#core {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  margin: auto;
}

#core.dashboard-core {
  /* max-width: 90rem !important; */
  /* max-width: calc(100%)!important;
  padding: 0 2rem; */
  /* background-color: var(--clr-background); */
}



#core_body {
  width: 100%;
  z-index: 7;
  
}



.nav_container, .footer_container {
  margin: auto;
  max-width: calc(100rem + 0.43rem + 0.43rem);
  padding: 0.43rem;
  border-radius: 0 0 var(--border-radius-400) var(--border-radius-400);
  border-radius: var(--border-radius-400);

  
}



/* UTILLS */

.container {
  margin: var(--rem-400) auto var(--rem-400) auto;
  max-width: 100rem;
  border-top: 0;
  border-bottom: 0;
  row-gap: 2rem;
  justify-items: center; 
}

.container > div {
  padding: 0 var(--rem-500);
  border-left: 1px solid var(--clr-border);
  width: calc(100% + 1px);
  border-right: 1px solid var(--clr-border);
}

.container_dash {
  margin: var(--rem-400) auto var(--rem-400) auto;
  max-width: 100rem;
  border-top: 0;
  border-bottom: 0;
  row-gap: 2rem;
  justify-items: center; 
}

.container_dash > div {
  padding: 0 0 0 var(--rem-500);
  
  width: 100%;
  
}




.grid_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
}

.grid_2 p {
   max-width: 33ch;
}

.grid_3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
}

.grid_4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
}


/* end UTILS */


.primary__button {
  overflow: hidden;

  display: flex;
  text-align: center;
  height: var(--rem-350);

  width: fit-content;
  padding: var(--rem-350) 1.125rem;
  align-items: center;
  cursor: pointer;
  color: var(--clr-background);

  font-size: var(--fs-300);
  font-weight: 400;
  border-radius: var(--border-radius);
  
    column-gap: 0.43rem;

  z-index: 123;
  background-color: var(--clr-dark);
  }

  .primary__button svg {
    fill:  var(--clr-background);
    
    height: 1.125rem;
    
  }
.secondary__button {

   display: flex;
  justify-content: center;  
  align-items: center; 
  font-size: var(--fs-300);
  outline: 1px solid var(--clr-dark);
  border-radius: var(--border-radius);
  height: var(--rem-350);
  color: var(--clr-dark);
  min-width: fit-content;
  max-width: fit-content;
  padding: var(--rem-350) 1rem;
  column-gap: 0.43rem;
  cursor: pointer;
    
}

  .secondary__button svg {
    fill:  var(--clr-dark);
    
    height: 1.125rem;
    
  }



.primary__button.dash, .secondary__button.dash {
  padding: 0 1rem;
  height: 2.45rem;
}



.primary__button, .secondary__button svg {

  fill: var(--clr-dark);
}

  .primary__button:hover, .secondary__button:hover {
    border-radius: var(--border-radius-hover);
    opacity: 0.9;
  }

.primary__button:hover {
  color: white;
}

.secondary__button:hover {
    background-color: var(--clr-light);
  }




.landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
 
}




/* authenticate */

.logo {
margin: auto; 

margin-bottom: 2px;
height: 1.515rem;
min-width: 10rem;
}

.logo_auth {
  
  height: 3rem;
  
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin-top: 0.43rem;
}



#core_authenticate {
display: grid;
grid-template-columns: auto calc(300px + 2rem) auto;
height: 24rem;
margin-bottom: 8rem;
}

#authenticate {
background-color: white;
position: relative;
border-radius: var(--border-radius);
padding: 2rem 2rem 0 2rem;
border: 1px solid var(--clr-light);

margin-bottom: 2rem;
box-shadow: 0 8px 16px -4px #0000000a;
}

#authenticate p {
  color: var(--clr-medium);
}

.core_authenticate_message {
width: 100%;
padding: 1rem;
position: relative;
}

#authenticate_message {
font-weight: 200;
font-size: var(--fs-200);

margin: 1rem auto;
line-height: 1.333;
bottom: 2rem;
max-width: fit-content;
padding: 1rem;
border-radius: var(--border-radius);
}


#message {
  margin-top: 2rem;
  margin-bottom: 2rem;


  font-size: var(--fs-200);

}

#message strong {
font-size: var(--fs-200)
}

#success {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
text-align: center;
font-size: var(--fs-300);
color: var(--clr-green);
background-color: white;
padding: 1rem;
border: 1px solid var(--clr-green);
border-radius: var(--border-radius);
max-width: 55ch;

}

.tab-list {
display: grid;
grid-template-columns: 1fr 1fr;

margin-bottom: 2rem;
} 

.tab-list button {
position: relative;
padding: 0.57rem;
font-size: var(--fs-200);
cursor: pointer;
border: none;
background: none;
color: var(--clr-lighter);
border-bottom: solid 0.14rem var(--clr-yellow);
}

.tab-list button.selected {
background: none;
border-bottom: solid 0.14rem var(--clr-dark-blue);
color: var(--clr-dark)
}


.tab-content form {
display: grid;

}

.tab-content form a{
text-decoration: underline;
}




form * {

/* align-content: center; */
}

form .input-container {
position: relative;
margin-bottom: 1rem;
}


form .icon {
position: absolute;
left: 0.7rem;
top: 1.4rem;
transform: translateY(-50%);
fill: var(--clr-medium);
}

form .icon_display {
  position: absolute;
  right: 0.5rem;
  
  transform: translateY(-50%);
  fill: var(--clr-medium);
  }

form input, textarea {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
height: 3rem;
border: 1px solid var(--clr-light);
border-radius: var(--border-radius-small);
box-sizing: border-box;

background-color: var(--clr-white);

color: var(--clr-medium);
}

form input:focus, form textarea:focus {
outline: none;
color: var(--clr-dark);
border-color: var(--clr-accent);
}



form a, form p {
margin-top: 2rem;
margin-bottom: 1rem;
text-align: center;
font-size: var(--fs-200);
}



form button[type="submit"] {
width: 100%;
padding: 1rem;
text-align: center;
background-color:var(--clr-dark);
border: none;
border-radius: var(--border-radius);
color: #fff;
cursor: pointer;
}

form button[type="submit"]:hover {
background-color: hsl(from var(--clr-dark) h s l / 0.8);
}











.progress {

margin: 0  1rem ;
height: 0.25rem;

overflow: hidden;

border-radius: var(--border-radius);

}



/* Custom styles for the progress bar container */
.progress-container {
width: 100%;


background-color: var(--clr-progress);

margin-top: 1rem;
height: 0.325rem;
border-radius: var(--border-radius);
position: relative;
}

#progress-bar, #pb {
position: relative;
text-align: center;
float: left;
width: 43%;
height: 100%;
border-radius: var(--border-radius);
text-align: center;


  background: linear-gradient(to right, 

var(--clr-user),
var(--clr-green),
  var(--clr-background-3));

-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
animation: load 2s linear infinite;
overflow: hidden;
}




.error {
font-size: var(--fs-200);
color: var(--clr-dark);
background-color: #FDF1F1;
border: solid 1px #EFC8C9;
border-left: 3px solid #C93532;
border-radius: var(--border-radius);
padding: 1rem;
opacity: 0; 
animation: fadeIn 0.1s ease-in forwards; 

}

.success {
color: var(--clr-dark);
font-size: var(--fs-200);
background-color: #E3FAE7;
border: solid 1px #B7E0BF;
border-left: 3px solid #509F53;
border-radius: var(--border-radius);
padding: 1rem;
}

.info {
color: var(--clr-dark);
font-size: var(--fs-200);
background-color: #EEF5FE;
border: solid 1px #ABC2EF;
border-left: 3px solid #1148C6;
border-radius: var(--border-radius);
padding: 1rem;
}

.warning {
color: var(--clr-dark);
font-size: var(--fs-200);
background-color: #FEF8E3;
border: solid 1px #FCF0C7;
border-left: 3px solid #EBC349;
border-radius: var(--border-radius);
padding: 1rem;
}


.close-icon-wrapper {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
align-items: center;
}

.close-icon-top {
  position: absolute;
  right: 1rem;
  top: 1rem;
  
  transform: translateY(-50%);
  cursor: pointer;
  align-items: center;
  z-index: 123;
  }

.close-icon {
justify-content: center;
align-items: center; 

margin: 0;
margin-left: auto;
padding: 0;
align-items: center;
width: 2rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
}



.close-icon svg {
fill: var(--clr-dark);

}
.close-icon:hover svg {
fill: var(--clr-light);
;
}



#uploadcontainer {
  display: none;
  
  align-items: center;
  border-radius: var(--border-radius);
  padding: 1rem 1.333333rem 1rem 1rem;
  
  width: calc(100% - 0.86rem);
  max-width: 40rem;
  background-color: var(--clr-module);
  position: fixed;
  right: 0rem;
  bottom: 0rem;
  margin: 0.43rem;
  margin-top: 2rem;
  height: 5rem;
  border: 1px solid var(--clr-dark);
  transition: transform 0.5s ease;  
  z-index: 9999;
  text-align: left;
}



.upload-left {
  
  border-radius: var(--border-radius);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;

  border-right: 1px solid white;

  background-color: var(--clr-module);
  
  position: absolute;
  min-height: calc(5rem - 2px);
  aspect-ratio: 1.14 / 1;
  
  left: 0;
}

.upload-icon {
  position: relative;
  margin: 0;
  padding: 0;
  margin-right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 3.57142857rem;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  overflow: hidden; 

  background-color: var(--clr-white);
}

.upload-icon svg {
  fill: var(--clr-user);
  
}

.upload-icon::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 50%;

  background: conic-gradient( 
    var(--clr-dark-blue), 
    var(--clr-green), 
      var(--clr-orange), 
      var(--clr-accent));

  background: conic-gradient( 

  var(--clr-user),

  var(--clr-green));
  mask: radial-gradient(closest-side, transparent 90%, var(--clr-dark)1%);
  -webkit-mask: radial-gradient(closest-side, transparent 90%, var(--clr-dark)50%);
  /* animation: spin 4s cubic-bezier(0.68, -0.2, 0.27, 3) infinite; */
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg); 
  }
  100% {
      transform: rotate(360deg); 
  }
}







.upload-icon-success {
  margin-right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center; 
  
  background-color: var(--clr-white);
  width: 4rem;
  width: 3.57142857rem;
  aspect-ratio: 1 / 1;
  
  border-radius: 100%;
  border: 1px solid var(--clr-white);
  
  opacity: 0; 
  animation: fadeIn 0.57s ease-in-out forwards; 
} 

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


.upload-icon-success svg {

fill: var(--clr-green) !important;
}



.upload-details {
flex: 1;
}

.upload-top {

 display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dz-filename {
font-size: var(--fs-200);
line-height: 1.414;
margin-bottom: 1rem ;  

color: var(--clr-white);

width: 100%;

overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}

#uploadProgress {
margin: 0;

margin-top: 0.14rem;
padding: 0;



color: var(--clr-white);

}



.modal_top {
	display: flex; justify-content: space-between; align-items: center;
  padding: 0;
  margin: 0;
	margin-bottom: 2rem;
  
}

      
@media (max-width: 1111px) {
  
  h1 {
    font-size: var(--fs-500);
  }

    h2 {
    font-size: var(--fs-400);
  }

    h3 {
    font-size: var(--fs-350);
  }

    h5 {
     font-size: var(--fs-300);
  }

  /* h6 {
     font-size: var(--fs-350);
  } */

  .grid_2 p {
   max-width: 100%;
  }





}
/* 

@media (max-width: 1111px) {

   
}

*/


@media (max-width: 810px) {
  .container {
    margin: var(--rem-400) 0;
    
  }

  .container > div {
      padding: 0 1rem;
  }
  
}



@media (max-width: 480px) {
  .dz-message-front img{
    display: none;
  }

  .container {
    padding: 1rem;
  }


}