/* ========================================= Variables ======================== */
:root {
  --body-bg : radial-gradient(circle, rgba(46,56,68,1) 0%, rgba(26,32,39,1) 70%, rgba(26,32,39,1) 100%);
  --main-bg-color: #1a202781; /*The one transparent used in the middle of the folder browser*/
  --second-bg-color: #1d232ca6; /*The one transparent used in the side panels */

  --main-text-color: #ffffff;
  --second-text-color:#ebebeb;

  --note-head-background-color : #68addb;
  --note-body-background-color : #e7f2fa;

  --main-border-color : #353c42;
  --second-border-color: #2c353d;

  --main-focus-color:#ebebeb;
  --disabled-background-color:grey;

  --context-selected-bg-color: #1d232c;
  --context-bg-color : #181d25;

  --scrollbar-track : #dfdfdf;

  --file-folder-icon : #dfdfdf;
  
  --main-button-color : #232a30;

  --card-bg-color : #343a40;

  --notification-bg : #1d232c;
  --notification-border : #646464;
  --notification-close-bg : #007bff;
  --notification-close-bg-hover : #0056b3;
  --notification-close-text : #fff;

  --progressbar-bg : #e0e0e0;
  --progress-bg : #009aeb;
  --progress-icon-bg : #009bec;
  
  --upload-button-bg : #212732;
  --upload-button-bg-hover : #212932;
  transition: all 0.3s ease;

  --profile-hover-bg : radial-gradient(circle, rgba(46,56,68,0.6979166666666667) 0%, rgba(26,32,39,0.8687850140056023) 70%, rgba(26,32,39,1) 100%);
}
  
.Light {
    --body-bg : #ffffff;
    --main-bg-color: #ffffff;
    --second-bg-color: #fbfbfb;

    --main-text-color: #111111;
    --second-text-color:#242424;

    --note-head-background-color : #68addb;
    --note-body-background-color : #e7f2fa;

    --main-border-color : #e7e7e7;
    --second-border-color: #aaaaaa;

    --main-focus-color:#1d1d1d;
    --disabled-background-color:grey;

    --context-selected-bg-color: #7a7a7a;
    --context-bg-color : #f0f0f0;

    --scrollbar-track : #dfdfdf;

    --file-folder-icon : #1985a0;

    --main-button-color : #dfdfdf;

    --card-bg-color : #ffffff;

    --notification-bg : #ffffff;
    --notification-border : #ccc;
    --notification-close-bg : #007bff;
    --notification-close-text : #fff;

    --progressbar-bg : #e0e0e0;
    --progress-bg : #009aeb;
    --progress-icon-bg : #009bec;

    --upload-button-bg : #d8d8d8;
    --upload-button-bg-hover : #bbbbbb;

    --profile-hover-bg : radial-gradient(circle, rgba(46,56,68,0.6979166666666667) 0%, rgba(26,32,39,0.8687850140056023) 70%, rgba(26,32,39,1) 100%);
    --dialogTrans-bg-color: #1d232ca6;
}

.Dark {
  --body-bg : radial-gradient(circle, rgba(46,56,68,1) 0%, rgba(26,32,39,1) 70%, rgba(26,32,39,1) 100%);
  --main-bg-color: #1a202781; /*The one transparent used in the middle of the folder browser*/
  --second-bg-color: #1d232ca6; /*The one transparent used in the side panels */

  --main-text-color: #ffffff;
  --second-text-color:#ebebeb;

  --note-head-background-color : #68addb;
  --note-body-background-color : #e7f2fa;

  --main-border-color : #353c42;
  --second-border-color: #2c353d;

  --main-focus-color:#ebebeb;
  --disabled-background-color:grey;

  --context-selected-bg-color: #1d232c;
  --context-bg-color : #181d25;

  --scrollbar-track : #dfdfdf;

  --file-folder-icon : #dfdfdf;
  
  --main-button-color : #232a30;

  --card-bg-color : #343a40;

  --notification-bg : #1d232c;
  --notification-border : #646464;
  --notification-close-bg : #007bff;
  --notification-close-bg-hover : #0056b3;
  --notification-close-text : #fff;

  --progressbar-bg : #e0e0e0;
  --progress-bg : #009aeb;
  --progress-icon-bg : #009bec;
  
  --upload-button-bg : #212732;
  --upload-button-bg-hover : #212932;

  --profile-hover-bg : radial-gradient(circle, rgba(46,56,68,0.6979166666666667) 0%, rgba(26,32,39,0.8687850140056023) 70%, rgba(26,32,39,1) 100%);
  --dialogTrans-bg-color: #1d232ca6;
}


/* =============================== Animation variables && Animation effects  ============================================ */
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

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

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

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


.underline-hover {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  padding-bottom: 3px;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: var(--note-head-background-color); /* Change color here */
  transition: width 0.3s ease-in-out;
}

.underline-hover:hover::after {
  width: 100%;
}