/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {





  --black: #000000;


  --background-light: #e0dddc;
  --on-background-light: #221f1c;
  --surface-light: #f7f7f7;
  --surface-container-low-light: #99a3a7;
  --surface-container-highest-light: #e0dddc;
  --on-surface-light: #201A18;
  --on-surface-variant-light: #52443D;
  --primary-light: #800701;
  --on-primary-light: #FFFFFF;
  --primary-container-light: #e0dddc;
  --on-primary-container-light: #341100;
  --secondary-container-light: #bebebe;
  --on-secondary-container-light: #2B160A;
  --outline-light: #85736B;
  --outline-variant-light: #6c7a83;
  --inverse-surface-light: #362F2C;
  --inverse-on-surface-light: #e9e9e9;


  --phon-light: #c7c7c7;
  
  --background-dark: #3a3e34;

  /**text*/
  --on-background-dark: #ebe5e5; 


  --surface-dark: #000000;

    /**sidebar*/
  --surface-container-low-dark: #161616;
  --surface-container-highest-dark: #5b6a68;

  /**titles*/
  --on-surface-dark: #ffffff;

  /**еще текст*/
  --on-surface-variant-dark: #cacaca;
  
  --primary-dark: #c4c4c4;
  --on-primary-dark: #000000;
  --primary-container-dark: #820701;
  --on-primary-container-dark: #ffffff;
  
  --secondary-container-dark: #3d3d3d;

  /**цвет текста выбранного элемента*/
  --on-secondary-container-dark: #ffffff;

  --outline-dark: #ffffff;

  /**скролл*/
  --outline-variant-dark: #cacaca;
  --inverse-surface-dark: #d4d4d4;
  --inverse-on-surface-dark: #000000;
  --phon-dark: #000000;





  --font-primary: 'Kumbh Sans', sans-serif;


  --fs-base: 62.5%;
  --fs-display-large: 5.7rem;
  --fs-display-medium: 4.5rem;
  --fs-display-small: 3.6rem;
  --fs-headline-large: 3.2rem;
  --fs-headline-medium: 2.8rem;
  --fs-headline-small: 2.4rem;
  --fs-title-large: 2.2rem;
  --fs-title-medium: 1.6rem;
  --fs-title-small: 1.4rem;
  --fs-body-large: 1.6rem;
  --fs-body-medium: 1.4rem;
  --fs-body-small: 1.2rem;
  --fs-label-large: 1.4rem;
  --fs-label-medium: 1.2rem;
  --fs-label-small: 1.1rem;


  --lh-base: 20px;
  --lh-display-large: 64px;
  --lh-display-medium: 52px;
  --lh-display-small: 44px;
  --lh-headline-large: 40px;
  --lh-headline-medium: 36px;
  --lh-headline-small: 32px;
  --lh-title-large: 28px;
  --lh-title-medium: 24px;
  --lh-title-small: 20px;
  --lh-body-large: 24px;
  --lh-body-medium: 20px;
  --lh-body-small: 16px;
  --lh-label-large: 20px;
  --lh-label-medium: 16px;
  --lh-label-small: 16px;


  --fw-regular: 400;
  --fw-medium: 500;


  --ls-n-025: -0.25px;
  --ls-p-010: 0.10px;
  --ls-p-015: 0.15px;
  --ls-p-025: 0.25px;
  --ls-p-040: 0.40px;
  --ls-p-050: 0.50px;





  --spacing-base: 4px;
  --spacing-05: calc(var(--spacing-base) * 0.5);
  --spacing-1: calc(var(--spacing-base) * 1);
  --spacing-2: calc(var(--spacing-base) * 2);
  --spacing-3: calc(var(--spacing-base) * 3);
  --spacing-4: calc(var(--spacing-base) * 4);
  --spacing-5: calc(var(--spacing-base) * 5);
  --spacing-6: calc(var(--spacing-base) * 6);
  --spacing-7: calc(var(--spacing-base) * 7);
  --spacing-8: calc(var(--spacing-base) * 8);
  --spacing-9: calc(var(--spacing-base) * 9);
  --spacing-10: calc(var(--spacing-base) * 10);
  --spacing-11: calc(var(--spacing-base) * 11);
  --spacing-12: calc(var(--spacing-base) * 12);
  --spacing-13: calc(var(--spacing-base) * 13);
  --spacing-14: calc(var(--spacing-base) * 14);
  --spacing-15: calc(var(--spacing-base) * 15);
  --spacing-16: calc(var(--spacing-base) * 16);
  --spacing-17: calc(var(--spacing-base) * 17);
  --spacing-18: calc(var(--spacing-base) * 18);
  --spacing-19: calc(var(--spacing-base) * 19);
  --spacing-20: calc(var(--spacing-base) * 20);





  --shadow-1: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004d;
  --shadow-2: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004d;
  --shadow-3: 0px 1px 3px 0px #0000004d, 0px 4px 8px 3px #00000026;
  --shadow-4: 0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026;
  --shadow-5: 0px 4px 4px 0px #0000004d, 0px 8px 12px 6px #00000026;





  --radius-extra-small: 4px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-extra-large: 28px;
  --radius-full: 1000px;





  --tr-duration-short: 200ms;
  --tr-duration-medium: 400ms;
  --tr-duration-long: 500ms;
  --tr-easing-linear: cubic-bezier(0, 0, 1, 1);
  --tr-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);





  --sidebar-width: 360px;
}


[data-theme="light"]{

  color-scheme: light;

  --background: var(--background-light);
  --on-background: var(--on-background-light);
  --surface-light: var (--surface-light);
  --surface-container-low: var(--surface-container-low-light);
  --surface-container-highest: var(--surface-container-highest-light);
  --on-surface: var(--on-surface-light);
  --on-surface-variant: var(--on-surface-variant-light);
  --primary: var(--primary-light);
  --on-primary: var(--on-primary-light);
  --primary-container: var(--primary-container-light);
  --on-primary-container: var(--on-primary-container-light);
  --secondary-container: var(--secondary-container-light);
  --on-secondary-container: var(--on-secondary-container-light);
  --outline: var(--outline-light);
  --outline-variant: var(--outline-variant-light);
  --inverse-surface: var(--inverse-surface-light);
  --inverse-on-surface: var(--inverse-on-surface-light);
  --phon: var(--phon-light);
}

[data-theme="dark"]{

  color-scheme: dark;

  --background: var(--background-dark);
  --on-background: var(--on-background-dark);
  --surface-light: var (--surface-dark);
  --surface-container-low: var(--surface-container-low-dark);
  --surface-container-highest: var(--surface-container-highest-dark);
  --on-surface: var(--on-surface-dark);
  --on-surface-variant: var(--on-surface-variant-dark);
  --primary: var(--primary-dark);
  --on-primary: var(--on-primary-dark);
  --primary-container: var(--primary-container-dark);
  --on-primary-container: var(--on-primary-container-dark);
  --secondary-container: var(--secondary-container-dark);
  --on-secondary-container: var(--on-secondary-container-dark);
  --outline: var(--outline-dark);
  --outline-variant: var(--outline-variant-dark);
  --inverse-surface: var(--inverse-surface-dark);
  --inverse-on-surface: var(--inverse-on-surface-dark);
  --phon: var(--phon-dark);
}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before
*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {list-style: none;}

a,
img, 
span, 
input, 
button, 
textarea{display: block;}

a {
  color: inherit;
  text-decoration: none;
}

img { height: auto;}

input, 
textarea, 
button {
  background: none;
  border: none;
  font: inherit;
}

button{cursor: pointer;}

textarea,
input { width: 100%;}

input, 
textarea,
[contenteditable="true"] {outline: none;}

textarea{resize: vertical;}





/*-----------------------------------*\
  #BASE
\*-----------------------------------*/

:where(input, textarea)::placeholder {color: currentColor; }

button:disabled {pointer-events: none; }

html{
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  font-size: var(--fs-body-medium);
  /* line-height: var(--lh-base); */
  margin: 0;
}

::selection {
  background-color: var(--primary);
  color: var(--on-primary);
}





/*-----------------------------------*\
  #TYPOGRAPHY
\*-----------------------------------*/







/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.material-symbols-rounded{
  width: 1em;
  height: 1em;
  display: block;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

:has(> .state-layer){
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
}

.state-layer{
  position: absolute;
  inset: 0;
  background-color: var(--state-layer-bg);
  opacity:0;
  transition: opacity var(--tr-duration-short) var(--tr-easing-linear);
  z-index:-1;
}

:has(> .state-layer):hover> .state-layer {opacity: 0.08;}

:has(> .state-layer):is(:focus, :focus-visible, :focus-within) > .state-layer {
  opacity: 0.12;
}

:has(> .state-layer):active> .state-layer {opacity: 0.16;}

.custom-scrollbar::-webkit-scrollbar {width: 8px;}

.custom-scrollbar::-webkit-scrollbar-track{
  background-color: var(--surface-container-low);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb{
  background-color: var(--outline-variant);
  border-radius: 4px;
}

.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--black);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: var(--tr-duration-short) var(--tr-easing-linear);
  transition-property: opacity, visibility;
}

.overlay.active{
  opacity: 0.5;
  visibility: visible;
}

.modal-overlay{
  z-index: 6;
  visibility: visible;
  animation: fade-overlay var(--tr-duration-short) var(--tr-easing-linear) forwards;
}

@keyframes fade-overlay{
  0%{opacity: 0;}
  100% {opacity: 0.5;}
}


/*-----------------------------------*\
  #COMPONENTS
\*-----------------------------------*/

/**
 * Icon button
 */

.icon-btn {
  display:grid;
  place-items: center;
  color: var (--on-surface-variant);
  border-radius: var(--radius-full);
  --state-layer-bg: var(--on-surface-variant);
}

.icon-btn.large{
  width: 40px;
  height: 40px;
}

.icon-btn.small{
  width: 28px;
  height: 28px;
}

.icon-btn.small .material-symbols-rounded {font-size: 1.8rem; }



/**
 * FAB (Floating Action Button)
 */

.fab {
  height:56px;
  max-width: max-content;
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  --state-layer-bg: var(--on-primary-container);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding-inline: var(--radius-large);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--tr-duration-short) var(--tr-easing-linear);
}

.fab:hover {box-shadow: var(--shadow-2);}

.fab .text {padding-inline-end: var(--spacing-2);}



/**
 * Card
 */

.card{
  background-color: var(--surface);
  padding: var(--spacing-4);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-large);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  --state-layer-bg: var(--on-surface);
  transition: border-color var(--tr-duration-short) var(--tr-easing-linear);
}

.card:where(:hover, :focus-visible) {border-color: var(--outline);}

.card .card-title {color: var(--on-surface);}

.card .card-text {
  color: var(--on-surface-variant);
  margin-block: var(--spacing-4);
  flex-wrap: balance;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: auto;
}

.card .card-time {color:var(--on-surface-variant);}

.card .icon-btn {
  opacity: 0;
  transition: opacity var(--tr-duration-short) var (--tr-easing-linear);
}

.card:where(:hover, :focus-visible) .icon-btn{
  opacity: 1;
}

/**
 * Modal
 */

 .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 560px;
  width: calc(100% - var(--spacing-8));
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-large);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-3);
  z-index:8;
  animation:modal-open var(--tr-duration-medium) var(--tr-easing-emphasized) forwards;
 }

@keyframes modal-open{
  0%{
    transform: translate(-50%, calc(-50% + var(--spacing-5)));
    opacity: 0;
    visibility: hidden;
  }

  100%{
    transform: translate(-50%,-50%);
    opacity: 1;
    visibility: visible;
  }
}

.modal .icon-btn{
  position:absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
}

.modal-title{
  padding-inline-end: var(--spacing-10);
  max-width: 480px;
  color: var(--on-surface);
  margin-block-end: (--spacing-4);
  overflow: hidden;
}

.modal-text{
  min-height: 240px;
  max-height: calc(100%-200px);
  color: var(--on-surface-variant);
  overflow-y: auto;
  margin-block-end: var(--spacing-4);
}

modal-footer{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-2);
  padding-block-start: var(--spacing-2);
}

modal-footer .time{
  flex-grow: 1;
  color: var(--on-surface-variant);
}

/**
 * Button
 */
 .btn{
  height: 40px;
  max-width: max-content;
  display: grid;
  align-items: center;
  border-radius: var(--radius-full);
 }

 .btn.text{
  color: var(--primary);
  --state-layer-bg: var(--primary);
  padding-inline: var(--spacing-3);
 }
 
 .btn .text:disabled {color: var(--on-surface);}

 .btn .text:disabled .text-label-large {opacity: 0.38;}

 .btn.fill{
  background-color: var(--primary);
  color: var(--on-primary);
  --state-layer-bg: var(--on-primary);
  padding-inline: var(--spacing-6);
  transition: box-shadow var(--tr-duration-short) var(--tr-easing-linear);

 }

 .btn.fill:hover:not(:focus) {box-shadow: var(--shadow-1);}

/**
 * Tooltip
 */

.tooltip{
  position: fixed;
  z-index: 4;
  height: 24px;
  display: grid;
  align-items: center;
  padding-inline: var(--spacing-2);
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  white-space: nowrap;
  border-radius: var(--radius-extra-small);
  pointer-events: none;
  animation: fade var(--tr-duration-short) var(--tr-easing-linear) forwards;
}

@keyframes fade{
  0% {opacity: 0;}
  100% {opacity: 1;}

}

/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar{
  /* position: fixed; */
  top: 0;
  bottom: 0;
  right: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, max-content) 1fr max-content;
  background-color: var(--surface-container-low);
  max-width: var(--sidebar-width);
  width:100%;
  padding: var(--spacing-3);
  border-radius: 0 var(--radius-large) var(--radius-large) 0;
  box-shadow: var(--shadow-3);
  z-index:4;
  visibility: hidden;
  transition: var(--tr-duration-long) var(--tr-easing-emphasized);
  transition-property: transform, visibility;
}

.sidebar.active {
  transform: translateX(0%);
  visibility: visible;
}

.sidebar .fab {display: none;}

.sidebar>.wrapper{
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar > .wrapper-1{
  padding-inline: var(--spacing-4) var(--spacing-2);
  margin-block-end: var(--spacing-3);
}

[data-theme='dark'] .logo-light,
.logo-dark {display: none;}

[data-theme='dark'] .logo-dark {display: block;}

.sidebar> .wrapper-2 {padding-inline: var(--spacing-4) var(--spacing-6);}

.sidebar .nav {overflow-y: auto;}

.nav-item{
  color: var(--on-surface-variant);
  --state-layer-bg: var(--on-surface-variant);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  padding-inline: var(--spacing-4) var(--spacing-6);
  border-radius: var(--raduis-full);
  cursor: pointer;
}

.nav-item.active{
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  --state-layer-bg: var(--on-secondary-container);
}

.nav-item.text{flex-grow: 1;}

.nav-item .icon-btn {
  opacity:0;
  visibility: hidden;
  transition: opacity var(--tr-duration-short) var(--tr-easing-linear);
}

.nav-item:where(:hover, :focus-within) .icon-btn{
  opacity: 1;
  visibility: visible;
}

.sidebar .cp-info {
  height: 56px;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-4);
  color: var(--on-surface-variant);
  transition: color var(--tr-duration-short) var(--tr-easing-linear);
}


















/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

.main{
  padding-inline: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  display: flex;
  flex-direction: column;
  height: 98vh;
  width: 900px;
  
}



.main .header{
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding-block: var(--spacing-4);
}

.main .header .wrapper{ flex-grow: 1;}

.main .header .title{ margin-block-end: var(--spacing-1);}

.main .header .text{ color: var(--on-surface-variant);}

.theme-btn{transition: transform var(--tr-duration-medium) var(--tr-easing-emphasized);}

[data-theme='dark'] .theme-btn .dark-icon,
.theme-btn .light-icon {display: none;}

[data-theme='dark'] .theme-btn .light-icon {display: block;}

[data-theme='dark'] .theme-btn {transform: rotate(-90deg);}

.main > .title {margin-block: var(--spacing-3);}

.note-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-content: flex-start;
  flex-grow: 1;
  align-items: stretch;
  gap: var(--spacing-2)
}

.main .fab {
  position: fixed;
  bottom: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 2;
}

.empty-notes{
  position: absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);
  color: var(--on-surface-variant);
  -webkit-user-select: none;
  user-select: none;
}

.empty-notes .material-symbols-rounded{
  font-size: 6.8rem;
  opacity: 0.25;
  margin-block-end: var(--spacing-4);
  margin-inline: auto;
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/* @media (min-width:768px){
  .main {padding-inline: var(--spacing-6);}
} */



@media (min-width:992px){
  


  .overlay:not(.modal-overlay){ display: none;}

  .sidebar{
    visibility: visible;
    left:0;
    height: 97vh;
    grid-template-rows: repeat(3, max-content) 1fr max-content;
    box-shadow: none;
    border-radius: 0;
  }


  .sidebar.active{ transform: unset; }

  .sidebar .fab{display: flex;}


  .main {padding-inline: var(--spacing-10);}

  .menu-btn,
  .main .fab {display: none;}
}



@media (min-width:1400){
  .main{
    max-width: 1480px;
    width:100%;
    margin-inline: auto;
  }

}


.navigation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}

.line {
  background-color: black;
  display: flex;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 20px;
  padding-bottom: 10px;
  /* height: auto; */
}

.name {
  /* margin-left: 5px; */
  font-size: 45px;
  color: white;
  padding-right: 10px;
}


.main0 {
  display: flex;
  padding-left: 50px;
  padding-right: 0px;
/*  min-height: 100%;*/
}

.maincreate {
  display: flex;
  justify-content: center;
  height: 570px;
  min-height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)),
    url("https://images6.alphacoders.com/131/1310889.jpeg");
  background-size: cover;
}
.container {
  padding-top: 15px;
  position: relative;
  width: 300px;
  height: 340px;
}

.container .box {
  position: relative;
  width: calc(300px - 30px);
  height: calc(300px - 30px);
  background: black;
  float: left;
/*  margin: 15px;*/
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
}

.container .box .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #6f140c;
  transition: 0.5s;
  z-index: 1;
}

.container .box:hover .icon {
  top: 20px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.container .box .icon .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -52%);
  font-size: 80px;
  transition: 0.5s;
  color: white;
}

.container .box:hover .icon .fa {
  font-size: 40px;
}

h1{
  margin-top: 30px;
  margin-bottom: 5px;
}
.container .box .content {
  position: absolute;
  top: 100%;
  height: calc(100% - 100px);
  width: calc(100%);
  text-align: center;
  padding-top: 20px;
  box-sizing: border-box;
  transition: 0.5s;
  opacity: 0;
}

.container .box:hover .content {
  top: 100px;
  opacity: 1;
}

.container .box .content h3 {
  margin: 0 0 10px;
  padding: 0;
  color: white;
  font-size: 20px;
}

.container .box .content p {
  margin: 0;
  padding: 10px;
  color: white;
}

.boder {
  padding-top: 10px;
  padding-left: 30px;
  font-size: 25px;
  width: 100%;
/*  height: 640px;*/
  color: white;
  background-size:  100%;

}

.aa{
  display: flex;
  position: relative;
  align-items: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url('./IMG_4281.png');
  background-size: 100%;
  background-size: cover;
  height: 450px;
}


.textopacity{
  width: 640px;
}

.cardsyougenerated {
  width: 100%;
  /* height: 50px; */
  background-color: black;
  color: white;
  /* font-size: 25px; */
  text-align: center;
}



#conscroll {
  width: 100%;
  height: 100%;
  overflow-y: auto; /* Добавляем вертикальную прокрутку */
}


.button-9 {
  /* appearance: button; */
  backface-visibility: hidden;
  background-color: #bebebe;
  border-radius: 50px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #3d3d3d;
  cursor: pointer;
  /* font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif; */
  font-size: 100%;
  height: auto;
  /* line-height: 1.15; */
  margin: 15px 0 0;
  outline: none;
  overflow: hidden;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
 
  
  align-items: center;
}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.createnew {
  padding-left: 0px;
  width: 200px;
}

h1{
  margin-top: 30px;
  margin-bottom: 5px;
}

body0 {
  background-size: cover;
  margin: 0;
  padding: 0;
  
}

h1 {
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0;
}

body1{
  display: flex;
}


.scroll-container {
  /* background-color: #333; */
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container .card {
  padding: 10px;
}


.cardimg {
  display: flex;
  margin-left: 10px;
  margin-left: 10px;
  color:#e0dddc;
  width:100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  /* height:max-content; */
}

.cardimg img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
}



.cardimg .card-text {
  flex: 1;
  padding: 0 20px;
}

.cardimg h2 {
  font-size: 18px;
  margin: 0;
}

.card p {
  font-size: 14px;
}


.contphoto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  background-color: var(--background);
}

.contphoto .box {
  width: 300px;
  margin: 20px;
  padding: 20px;
  /* border: 1px solid #000000; */
  background-color: var(--phon);
  border-radius: 8px;
  overflow: hidden;
  color: var(--on-background);
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.contphoto .box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 .25rem rgba(156, 0, 0, 0.7), -.125rem -.125rem 1rem rgba(172, 5, 5, 0.5), .125rem .125rem 1rem rgba(255, 0, 0, 0.5);
  /* box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(0, 0, 0, 0.5), .125rem .125rem 1rem rgba(255, 255, 255, 0.5); */

}

.contphoto .box img {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.contphoto .box h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.contphoto .box p {
  max-height: 150px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.button-62 {
  background: linear-gradient(to bottom right, #7b0007, #b3000b);
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;

  font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.5;
  outline: transparent;
  padding: 0 1rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-62:not([disabled]):focus {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button-62:not([disabled]):hover {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.footer{
  width:100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 45px;
  /* display: flex; */
}

.footer h4{
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.footer div{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.footer div span{
  padding-left:10px;
}

@media only screen and (max-width: 720px){
  .line {
    background-color: black;
    /* height: auto; */
    padding-left: 10px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    /* width: 100%; */
    
  }

  .cardimg{
    display: none;
  }

  .card-text{
    display: none;
  }

  .name {
    /* margin-left: 5px; */
    font-size: 40px;
    color: white;
    /* padding-right: 10px; */
  }

  .aa{
    display: block;
    /* position: relative; */
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url('./phm.png');
    background-size: 100%;
    height: 480px;
    
  }

  .main0 {
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    /* margin-left: 20px; */
  }
  
  .container {
    display: none;
  }
  

  .boder {
    padding-top: 20px;
    padding-left: 0px;
    margin-left: 20px;
    font-size: 13px;
    width: 300px;
  /*  height: 640px;*/
    color: white;
    background-size:  100%;
  }

  #notebookpart{
    height: 98vh;
  }

  .main{
    /* padding-inline: var(--spacing-4);
    padding-block-end: var(--spacing-4); */
    display: flex;
    flex-direction: column;
    height: 98vh;
    width: 98%;
    position: absolute;
    margin-left: 2%;
  }


  .overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: var(--tr-duration-short) var(--tr-easing-linear);
    transition-property: opacity, visibility;
  }

  .overlay.active{
    opacity: 0.5;
    visibility: visible;
  }

  .main .fab {
    position: fixed;
    
    bottom: 100%-50px;
    
    left: 100%-20px;
    z-index: 2;
    /* padding-left: 8px;
    padding-right: 8px; */
  }

  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* max-width: 300px; */
    width: 300px;
    background-color: var(--surface-container-highest);
    border-radius: var(--radius-large);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-3);
    z-index:8;
    animation:modal-open var(--tr-duration-medium) var(--tr-easing-emphasized) forwards;
   }
  
  @keyframes modal-open{
    0%{
      transform: translate(-50%, calc(-50% + var(--spacing-5)));
      opacity: 0;
      visibility: hidden;
    }
  
    100%{
      transform: translate(-50%,-50%);
      opacity: 1;
      visibility: visible;
    }
  }
  
  .modal .icon-btn{
    position:absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
  }
  
  .modal-title{
    padding-inline-end: var(--spacing-10);
    max-width: 300px;
    color: var(--on-surface);
    margin-block-end: (--spacing-4);
    overflow: hidden;
  }
  
  .modal-text{
    min-height: 240px;
    max-height: calc(100%-200px);
    color: var(--on-surface-variant);
    overflow-y: auto;
    margin-block-end: var(--spacing-4);
  }
  .textopacity{
    width: 355px;
  }
  .main{
    padding: 0;
  }

  .navigation{
    margin-left: 20px;
  }

  
}