/* Global Layout */

html{

    overflow-y:visible;
}

body {
    font-family: 'Arimo', Arial, sans-serif;
    background: #fff8dc;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .tablet {
    background-color: white;
    width: 400px;
    height: 640px;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid #d2b48c;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

.accountOptionsHolder{
  position: absolute;
  z-index: 1000000;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.accountOptions{
  background: #ffe17d;
  color: #4a3000;
  width: 75%;
  height: 75%;
  padding: 3px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;

  box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);

font-size: 10px;
}

.loginOptions{
  height: 70%;
  width: 80%;
  background: #ffd96f;
  border-radius: 3px ;

  overflow-y: auto;
}

.loginOptions .loginOption{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  height: 75px;
  width: 100%;
  border-bottom: 2px solid rgb(165, 106, 42);

  box-sizing: border-box;
  padding: 5px;
  font-size: 20px;
}

.loginOptions .loginOption i{
  font-size: 25px;
}

.shareOptions .shareOption input{
  width: 25px;
  height: 25px;
}

.accountOptions button{
  background-color: 	#e99c36;
  color: #ffe6c5;
  width: 60%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.accountOptions button:active{
  background-color: 	#ffe6c5;
  color: #e99c36;
  transform: scale(1.1);
  border-radius: 8px;
}
  
  /* Folder bar */
  .folders {
    background-color: #f0e6d6;
    height: 7%;
    border-bottom: 1px solid #d2b48c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-weight: bold;
    color: #6e4c1e;
  }
  
  .folders button {
    background-color: #d2b48c;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;  
    cursor: pointer;
  }

  
  .leftLine {
    position: absolute;
    left: 24px;
    top: 0;
    border-left: 3px double #c8a578;
    z-index: 10;
    pointer-events: none;
    height: 99%;
  }
  
  .notepad {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .notes {
    flex: 1;
    overflow-y: auto;
    margin-left: 24px;
    padding-left: 8px;
    position: relative;
  }

  .notes {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  max-height: 97%;
  padding: 10px;
}

  .notes::-webkit-scrollbar {
    width: 5px;
  }
  .notes::-webkit-scrollbar-thumb {
    background: #0006;
    border-radius: 5px;
  }
  
  /* === DRAW POPUP === */
  .drawPopup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    background: rgba(0, 200, 255, 0.075);
    backdrop-filter: grayscale(30%) blur(4px);
    -webkit-backdrop-filter: grayscale(30%) blur(4px);
  
    z-index: 100;
    display: none;
    flex-direction: column;
  }
  
  
  .drawPopup.active {
    display: flex;
  }
  
  /* === Header with Cancel (left) and Upload (right) === */
  .drawHeader {
    background-color: #f0e6d6;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .drawHeader button {
    background-color: #d2b48c;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
  }
  
  /* === Controls above the canvas === */
  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    padding: 8px;
    background-color: rgba(240, 230, 214, 0.85);
    backdrop-filter: blur(4px);
  }
  
  .controls button {
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    background-color: #ddd;
    cursor: pointer;
    font-size: 12px;
  }
  
  .color-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 0;
  }
  
  .drawArea {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
    
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-drag: none; 
  }
  
  .drawArea canvas {
    position: absolute;
    top: calc(100 * var(--vhUnit));
    transform: translateY(-275%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
    
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-drag: none; 
  }
  
  
  .folders {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0;
    width: 100%;
  }

  .folders button{
    height: 35px;
    margin-bottom: 2.5px;
    background-color: #FcFcfc;
    box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    -webkit-box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    -moz-box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    color: #3a485a;
    transition: all 0.3s ease;
    border-radius: 5px;
  }
  
  .folders button:active{
    transform: scale(0.90);
    background-color: #3a485a;
    color: #FcFcfc;
    border-radius: 10px;
  }

  .folders .tabWrapper{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 300px;
    width: 85%;
  }
  
  .folders .tab {
    position: relative;
    background-color: #FcFcfc;
    color: #5e6977;
    cursor: pointer;
    display: inline-block;
    z-index: 2;
    transition: all 0.3s ease;
    margin-left: 25px;
    margin-right: 25px;
  }
  
  .folders .tab.open {
    box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    -webkit-box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    -moz-box-shadow: 20px -20px 32px -13px rgba(0,0,0,0.49);
    height: 40px;
    width: 70px;

    font-size: 15px;
    text-align: center;
  }

  .folders .tab.open span{
    text-align: center;
    width: 60px;
    height: 40px;
  }
  
  .folders .tab.closed {
    box-shadow: 20px -4px 36px 0px rgba(0,0,0,0.34);
    -webkit-box-shadow: 20px -4px 36px 0px rgba(0,0,0,0.34);
    -moz-box-shadow: 20px -4px 36px 0px rgba(0,0,0,0.34);
    height: 25px;
    width: 50px;
    font-size: 10px;
    text-align: center;
  }
  
  .folders .tab.hidden {
    border-bottom: 1px solid rgb(179, 137, 13);
    height: 30px;
    width: 30px;
  }
  
  .folders .tab::before,
  .folders .tab::after {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    background-color: #FcFcfc;
    z-index: -1;
    border-radius: 10px 10px 0 0;
  }
  
  .folders .tab::before {
    left: -20px;
    transform: skewX(-10deg);
  }
  
  .folders .tab::after {
    right: -20px;
    transform: skewX(20deg);
  }
  
  .folders .tab.open,
  .folders .tab:hover {
  background-color: #FFF8DC;
    color: #788EAB;
    z-index: 3;
  }
  
  .folders .tab.open::before,
  .folders .tab.open::after,
  .folders .tab:hover::before,
  .folders .tab:hover::after {
  background-color: #FFF8DC;
  }  

  .folders .tab.new{
    width: 5px;
    text-align: center;
    padding: 0px;
    font-size: 10px;
    height: 15px;
  }

  #openDrawBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
  
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.2s;
  }

   #signOutBtn {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
  
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.2s;
  }

  .folders .infoBar{
    position: absolute;
    top: 0;
    left: 100px;
  }
  
  .folders .openDrawBtn:hover {
    background-color: #bee2ff;
  }
  
.notes .actionButtons{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 97%;
  border: var(--note-tag-color, rgb(62, 84, 211)) 2px solid;
  height: 30px;
  padding: 3px;
  border-radius: 3px;
  margin-bottom: -3%;
}

.notes .sectionedNote{
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 1px;
  background-color: rgba(136, 88, 0, 0.15);
  margin-bottom: 5%;
  border-radius: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.notes .noteInfo{
  color: rgb(80, 80, 80);
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

.notes .sectionedNote .noteText{
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;   /* break words if too long */
  overflow-wrap: anywhere;  /* newer version, works better */
  color: black;
  font-size: 18px;
}

.notes .sectionedNote img{
  background-color: rgba(167, 128, 0, 0.158);
  padding: 2px;
  border-radius: 5px;
}

.notes .actionButtons button{
  background-color: rgba(255, 248, 222, 0.445);
  color: #364350;
  backdrop-filter: blur(1px);
  font-size: 20px;
  height: 30px;
  width: 30px;  
  text-align: center;

  border: 1px solid gray;
  border-radius: 5px;

  transition: 0.1s all ease-in-out;

  cursor: pointer;
  margin-right: 2%;
}

.notes .actionButtons button:hover{
  transform: scale(1.1);
}

.notes .actionButtons button:active{
  background-color: #364350;
  color: rgba(255, 248, 222, 0.445);
  transform: scale(1.1);
  border-radius: 12px;
}

.notes .actionButtons .tagIdentifier{
  width: 30%;
  background-color: var(--note-tag-color, rgb(0, 0, 0));
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  margin-left: -3px;
}

.notes .actionButtons .tagIdentifier p{
  color: white;
  filter: grayscale(30%);
}

.sectionedNote .sharedInfo{
  font-size: 15px;
  color: rgba(56, 56, 56, 0.856);
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes fadeOut {
  0%{
    opacity: 1;
  }
  30%{
    opacity: 0.55;
  }
  100%{
    opacity: 0;
  }
}

@keyframes bounce{
	0%, 20%, 50%, 80%, 90% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
  100%{transform: translateY(0);}
}

.notes img{
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
}

.shareListHolder{
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(3px);
}

.shareList{
  background: #ffe17d;
  color: #4a3000;
  width: 75%;
  height: 75%;
  padding: 3px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;

  box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
}

.shareOptions{
  height: 70%;
  width: 80%;
  background: #ffd96f;
  border-radius: 3px ;

  overflow-y: auto;
}

.shareOptions .shareOption{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  height: 75px;
  width: 100%;
  border-bottom: 2px solid rgb(165, 106, 42);

  box-sizing: border-box;
  padding: 5px;
}

.shareOptions .shareOption input{
  width: 25px;
  height: 25px;
}

.shareList button{
  background-color: 	#e99c36;
  color: #ffe6c5;
  width: 60%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.shareList button:active{
  background-color: 	#ffe6c5;
  color: #e99c36;
  transform: scale(1.1);
  border-radius: 8px;
}

.notes img{
  width: 100%;
}

.moveListHolder{
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(3px);
}

.moveList{
  background: #ffe17d;
  color: #4a3000;
  width: 75%;
  height: 75%;
  padding: 3px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;

  box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
}

.moveOptions{
  height: 70%;
  width: 80%;
  background: #ffd96f;
  border-radius: 3px ;

  overflow-y: auto;
}

.moveOptions .moveOption{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  height: 75px;
  width: 100%;
  border-bottom: 2px solid rgb(165, 106, 42);

  box-sizing: border-box;
  padding: 5px;
}

.moveOptions .moveOption input{
  width: 25px;
  height: 25px;
}

.moveList #moveButton{
  background-color: 	#e99c36;
  color: #ffe6c5;
  width: 60%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.moveList #moveButton:active{
  background-color: 	#ffe6c5;
  color: #e99c36;
  transform: scale(0.9);
  border-radius: 8px;
}

.moveList .buttons{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.moveList #cancelButton{
  background-color: 	#e99c36;
  color: red;
  width: 10%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.moveList #cancelButton:active{
  background-color: red;
  color: #e99c36;
  transform: scale(0.9);
  border-radius: 8px;
}

.createTabHolder{
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(3px);
}

.createTabHolder .createTab{
  background: #ffe17d;
  color: #4a3000;
  width: 75%;
  height: 30%;
  padding: 3px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;

  box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 39px -2px rgba(0,0,0,0.75);
}

.createTab input{
  background-color: white;
  border: 2px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.createTab #createButton{
  background-color: 	#e99c36;
  color: #ffe6c5;
  width: 60%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.createTab #createButton:active{
  background-color: 	#ffe6c5;
  color: #e99c36;
  transform: scale(0.9);
  border-radius: 8px;
}

.createTab .buttons{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.createTab #cancelButton{
  background-color: 	#e99c36;
  color: red;
  width: 10%;
  height: 30px;
  border: 1px solid #ffc38f;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.createTab #cancelButton:active{
  background-color: red;
  color: #e99c36;
  transform: scale(0.9);
  border-radius: 8px;
}

.noInternet{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;

  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.noInternet img{
  width: 25%;
}

.noInternet p{
  text-align: center;
  width: 70%;
}

.bottomPanel{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 6%;
  margin-bottom: 0.5%;
  background-color: #ffd86c;
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 25px 5px rgba(0,0,0,0.46); 
box-shadow: 5px 5px 25px 5px rgba(0,0,0,0.46);
  z-index: 10000;
}

.bottomPanel .selection{
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
}

.bottomPanel .selection#default{
  margin-bottom: 10%;
  border: 5px #F2F2F2 solid;
  color: rgb(255, 245, 223);
  width: 45px;
  height: 45px;
  background-color: #3179ff;
  border-radius: 100px;
    -webkit-box-shadow: 5px 5px 25px 5px rgba(0,0,0,0.16); 
box-shadow: 5px 5px 25px 5px rgba(0,0,0,0.16);
}

.bottomPanel .selection#default:not(.selected){
  background-color: rgb(32, 32, 32);
}

.bottomPanel .selection.selected{
  color: rgb(232, 244, 255); 
  -webkit-box-shadow: 5px 5px 27px 0px rgba(0,0,0,0.57); 
box-shadow: 5px 5px 27px 0px rgba(0,0,0,0.57);
background-color: rgba(71, 71, 71, 0.192);
border-radius: 10px;
}

.AIPanel{
  position: absolute;
  z-index: 250;
  height: 100%;
  width: 100%;
  background-color: wheat;
}

.AIPanel p{
  font-size: 25px;
  display: inline-block;
  width: 100%;
  color: #300d03;
}
.tags{
  position: absolute;
  z-index: 250;
  background-color: rgb(255, 236, 150);
  height: 100%;
  width: 100%;
}

.tags h1{
  color: #36140a;
}

.tags .container{
  width: 100%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.tags .container .tagContainer{
  height: 90%;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  flex-direction: column;
  overflow-y: auto;
  margin-top: -45px;
}

.tags .container .tag{
  position: relative;
  width: 90%;
  border-left: var(--tag-color, #ff173a) 5px solid;
  background-color: rgba(255, 174, 0, 0.247);
  -webkit-box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.6); 
box-shadow: 5px 5px 30px 5px rgba(0,0,0,0.6);
border-radius: 5px;
  padding: 2px;
  padding-left: 20px;
  box-sizing: border-box;
  height: 25%;

  display: flex; 
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;

  margin-top: 55px;

}

.tags .container .tag h1{
  font-size: 25px;
}

.tags .container .tag p{
  color: gray;
  font-size: 10px;
}

.tags .container .tag progress{
  width: 80%;
  border-radius: 3px;
}

.tags .container .tag progress::-webkit-progress-value{
  background-color: var(--tag-color, #ff173a);
}

.tags .container .tag .deleteTag{
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgb(236, 55, 42);
  border: 0;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  color: rgb(255, 255, 255);
  width: 35px;
  border-left: 1px solid rgb(0, 0, 0);
  font-size: 20px;
}

.tags .container #newTag{
  background-color: #3179ff;
  border: 0;
  color: #FcFcfc;
  font-size: 40px;
  height: 45px;
  width: 70%;
  text-align: center;
  border-radius: 10px;
}

.newTagPanel{
  position: absolute;
  z-index: 1000000000;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background-color: rgba(245, 222, 179, 0.164);

  display: flex;
  align-items: center;
  justify-content: center;
}

.newTagPanel .container{
  width: 70%;
  height: 40%;
  background-color: rgb(255, 210, 85);
  
  box-sizing: border-box;
  padding: 8px;
  
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;

  -webkit-box-shadow: 5px 5px 25px 2px rgba(0,0,0,0.53); 
box-shadow: 5px 5px 25px 2px rgba(0,0,0,0.53);
}

.newTagPanel h1{
  color: #300d03;
  font-size: 25px;
}

.newTagPanel input[type="text"]{
  width: 90%;
  padding: 5px;
  font-size: 15px;
  background-color: rgb(173, 118, 0);
  border: 1px solid rgb(148, 101, 0);
  border-radius: 6px;
  color: #300d03;
}

.newTagPanel input[type="color"]{
  width: 95%;
  padding: 5px;
  font-size: 15px;
  background-color: rgb(173, 118, 0);
  border: 1px solid rgb(148, 101, 0);
  border-radius: 6px;
  color: #300d03;
}

.newTagPanel .buttons{
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.newTagPanel button#create{
  background-color: #3179ff;
  height: 30px;
  width: 80%;
  border: 0;
  color: #ddd;
  border-radius: 5px;
}

.newTagPanel button#cancel{
  background-color: #ff2121;
  height: 30px;
  width: 15%;
  border: 0;
  color: #ddd;
  border-radius: 5px;
}

.newNoteBox, .editNoteBox{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10000000;
  background-color: rgba(255, 216, 144, 0.411);
  backdrop-filter: blur(8px);
  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;

  box-sizing: border-box;
  padding: 10px;
  color: #36140a;
}

.newNoteBox .addToFolder, .editNoteBox .addToFolder{
  color: rgba(37, 37, 37, 0.555);
  transform: scaleX(1.1);
  border-bottom: 1px solid gray ;
  font-size: 18px;
}

.newNoteBox .addToFolder select, .editNoteBox .addToFolder select{
  width: 100px;
  background-color: rgba(255, 255, 255, 0);
  color: rgba(37, 37, 37, 0.555);
  border: 0px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
  border-top-right-radius: 8px;
  font-size: 18px;
}

.newNoteBox textarea, .editNoteBox textarea{
  width: 90%;
  margin-bottom: 2%;
  margin-top: 5%;
  height: 20%;
  font-family: Arial, Helvetica, sans-serif;  
  background-color: rgba(240, 182, 74, 0.514);
  font-size: 15px;
  color: rgb(71, 46, 0);
  border: 1px #36140a solid;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;

  -webkit-box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.18); 
box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.18);
}

.newNoteBox .attachmentOptions, .editNoteBox .attachmentOptions{
  width: 90%;
  margin: 5%;
  height: 8%;
  font-family: Arial, Helvetica, sans-serif;  
  background-color: rgba(240, 182, 74, 0.63);
  font-size: 40px;
  color: rgb(71, 46, 0);
  border: 1px #36140a solid;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 6px;
  text-align: center;

  -webkit-box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.18); 
box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.18);
}

.newNoteBox .otherOptions, .editNoteBox .otherOptions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 95%;
  margin-top: 30%;
  height: 55px;
  margin-left: 6%;
}

.newNoteBox .otherOptions .tagSelection, .editNoteBox .otherOptions .tagSelection{
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 5%;
  flex-direction: row;
}

.newNoteBox .otherOptions .tagSelection .color, .editNoteBox .otherOptions .tagSelection .color{
  height: 25px;
  min-width: 25px;
  background-color: gray;
  color: transparent;
  border-radius: 100px;
  margin-right: 10px;  
}

.newNoteBox .otherOptions .tagSelection select, .editNoteBox .otherOptions .tagSelection select{
  height: 25px;
  background-color: rgba(240, 182, 74, 0.63);
  border: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 4px;
  width: 85%;
  color: #633800;
}

.newNoteBox .otherOptions .tagSelection i, .editNoteBox .otherOptions .tagSelection i{
  margin-left: 10px;
}

.newNoteBox .otherOptions .calendarAddition, .editNoteBox .otherOptions .calendarAddition{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width: 20%;
  height: 25px;
}

.newNoteBox .otherOptions .calendarAddition i, .editNoteBox .otherOptions .calendarAddition i{
  font-size: 30px;
  color: #633800;
}

.newNoteBox .otherOptions .linkConnection, .editNoteBox .otherOptions .calendarAddition i{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 95%;
  margin-top: 5%;
}

.newNoteBox .otherOptions .linkConnection input, .editNoteBox .otherOptions .linkConnection input{
  height: 21px;
  background-color: rgba(240, 182, 74, 0.897);
  border: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 4px;
  width: 85%;
  color: #633800;
}

.newNoteBox .otherOptions .linkConnection i, .editNoteBox .otherOptions .linkConnection i{
  font-size: 27px;
  color: #633800;
}

.newNoteBox .uploadButtons, .editNoteBox .uploadButtons{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-top: 25%;
}

.newNoteBox .uploadButtons .cancel, .editNoteBox .uploadButtons .cancel{
  width: 15%;
  background-color: red;
  height: 40px;
  border: 0;
  border-radius: 4px;
  color: #ddd;
  font-size: 20px;
    -webkit-box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.48); 
box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.48);
}

.newNoteBox .uploadButtons .upload, .editNoteBox .uploadButtons .upload{
  width: 80%;
  height: 40px;
  border-radius: 4px;
  border: 0;
  background-color: #3179ff;
  color: #ddd;
  font-size: 20px;
    -webkit-box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.48); 
box-shadow: 5px 5px 18px 1px rgba(0,0,0,0.48);
}

.totalProgressPanel{
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
  background-color: wheat;
}

.totalProgressPanel .container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column; 
  height: 90%;
}

.totalProgressPanel h1{
  transform: scaleX(1.15);
  color: #300d03;
} 

.totalProgressPanel p{
  font-size: 25px;
  color: rgb(73, 62, 62);
  width: 100%;
  text-align: center;
}

.totalProgressPanel span{
  font-size: 40px;
  color: #36140a;
}

.newNoteBox.drawing-active{
 height: 80vh; /* Expands to take up a larger portion of the viewport */
 transition: height 0.3s ease-in-out;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
}

.newNoteDrawArea {
 flex: 1;
 display: none; /* Initially hidden */
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 background-color: #f8f8f8;
 border-radius: 8px;
 box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

#newNoteCanvas {
 border: 1px solid #ccc;
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.newNoteDrawingBtns {
 display: flex;
 gap: 10px;
 margin-top: 15px;
}

.drawing-btn {
 padding: 8px 15px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-weight: bold;
}

.done-drawing-btn {
 background-color: #4CAF50;
 color: white;
 margin-bottom: 30%;
}

.cancel-drawing-btn {
 background-color: #f44336;
 color: white;
 margin-bottom: 30%;
}

.attachmentOptions {
  /* Existing styles */
  transition: all 0.5s ease-in-out; /* Add a smooth transition */
}

.attachmentOptions.drawing-active {
  position: absolute;
  top: -20px;
  left: -20px;
  height: 100%;
  width: 100%;
  z-index: 10000000;
  background-color: rgba(255, 192, 57, 0.247);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* To stack the controls and canvas vertically */
}

.controlButtonStyle-color{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.controlButtonStyle-thickness{
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.controlButtonStyle-other{
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.aiProccesing{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000000000000;

  backdrop-filter: blur(10px);
  background-color: rgba(180, 121, 12, 0.315);
}

.aiProccesing p{
  width: 60%;
  text-align: center;
  color: black;
  font-size: calc(15 * var(--vwUnit));
}