.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

:root {
  --main-color: #23a69d; 
  --main-color-opacity: rgba(35, 164, 155, 0.9);
  --grey-bgcolor: #e8e8e8;
  --select-color: #c6ecd9;
}

.App-link {
  color: #61dafb;
}

.clamp-line {
  width: calc(100% - 60px);
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #000 !important;
}
/* SnackBar.css */
.snackbar {
    display: flex;
    position: fixed;
    flex-direction: row;
    flex: 1 0;
    min-height: 80px;
    max-height: 240px;
    min-width: 400px;
    max-width: 400px;
    grid-gap: 16px;
    gap: 16px;
    background-color: var(--Grey-Scale-White, #FFF);
    color: white;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-Index: 999999999
  }
  
  .snackbar.show {
    opacity: 1;
    visibility: visible;
  }
  
  .snackbar-top-right {
    top: 20px;
    right: 20px;
  }
  
  .snackbar-top-left {
    top: 20px;
    left: 20px;
  }
  
  .snackbar-bottom-right {
    bottom: 20px;
    right: 20px;
  }
  
  .snackbar-bottom-left {
    bottom: 20px;
    left: 20px;
  }


  

.nex-snackbar-messageContainer {
    display: flex;
    padding: 15px 0px;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 2px;
    gap: 2px;
    flex: 1 0;
}

.nex-snackbar-messageTitle {
    align-self: stretch;
    color: var(--Grey-Scale-600, #0A0A0A);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    text-align: start;
    font-weight: 600;
    line-height: 16px; /* 128.571% */
    letter-spacing: 0.16px;
    overflow: hidden; /* Hide overflow content */
}

.nex-snackbar-messageContent {
    align-self: stretch;
    color: var(--Grey-Scale-600, #0A0A0A);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    text-align: start;
    font-weight: 400;
    line-height: 16px; /* 128.571% */
    letter-spacing: 0.16px;
}

.nex-snackbar-closeBtnContainer {
    display: flex;
    flex-direction: flex-start;
    padding: 16px;
    align-self: stretch;
    border-radius: 50%;
}

.nex-snackbar-closeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    transform: translateY(-4px);
}

.nex-snackbar-closeBtn:hover{
    background-color: #f8f4f4;
}

.fade-in {
    animation: fadeIn 1s forwards;
}

.fade-out {
    animation: fadeOut 1s forwards;
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
body {
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* background-color: #dddbd1; */
  background: linear-gradient(0deg, #dddbd1 80%,  #47b3b3 80%);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {  
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
}  

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

::-webkit-scrollbar-thumb {
  background: #AAAAAA; 
}  

::-webkit-scrollbar-thumb:hover {
  background: #999999; 
}

div{
  scrollbar-width: thin;
  scrollbar-color: #AAAAAA #FFFFFF;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.499af208.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.6b69287d.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.350ec982.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.af30acd9.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.62afd8a7.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.009379f5.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(../../static/media/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.465390c6.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* Inter 18pt */
  @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Thin.1c5b9a0e.ttf) format('truetype');
      font-weight: 100;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-ThinItalic.a0f6c903.ttf) format('truetype');
      font-weight: 100;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-ExtraLight.9c52fd6f.ttf) format('truetype');
      font-weight: 200;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-ExtraLightItalic.6532ad1a.ttf) format('truetype');
      font-weight: 200;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Light.8583bd6f.ttf) format('truetype');
      font-weight: 300;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-LightItalic.6ae79f83.ttf) format('truetype');
      font-weight: 300;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Regular.86c330c6.ttf) format('truetype');
      font-weight: 400;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Italic.9bb3be9c.ttf) format('truetype');
      font-weight: 400;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Medium.c51b145d.ttf) format('truetype');
      font-weight: 500;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-MediumItalic.0c8dd49a.ttf) format('truetype');
      font-weight: 500;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-SemiBold.d52a01d1.ttf) format('truetype');
      font-weight: 600;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-SemiBoldItalic.739d3a8e.ttf) format('truetype');
      font-weight: 600;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Bold.934ca051.ttf) format('truetype');
      font-weight: 700;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-BoldItalic.42de0cd8.ttf) format('truetype');
      font-weight: 700;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-ExtraBold.c9a0d06d.ttf) format('truetype');
      font-weight: 800;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-ExtraBoldItalic.230fa25c.ttf) format('truetype');
      font-weight: 800;
      font-style: italic;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-Black.2615b19a.ttf) format('truetype');
      font-weight: 900;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Inter';
      src: url(../../static/media/Inter_18pt-BlackItalic.d7efd3e2.ttf) format('truetype');
      font-weight: 900;
      font-style: italic;
    }
    
    /* Inter 24pt */
    @font-face {
      font-family: 'Inter-24pt';
      src: url(../../static/media/Inter_24pt-Thin.d361eeab.ttf) format('truetype');
      font-weight: 100;
      font-style: normal;
    }
    
    /* Add the rest of the 24pt and 28pt fonts following the same pattern */