/*
  [ General Information ]

  Project:        Sticky To-Do Note
  Version:        1.0
  Last change:    25/02/2024 [fixed Float bug, vf]
  Assigned to:    Nazmur Raihan
  Primary use:    Seprate App, Plugin
  Techologies:    Vue.js

  [ Important Classes ]

  .openDivs => opens the color palette & copied sign by changing it's 'scale' value
  .expand => unlock the height and remove the scroll-Bar to give the user full experience to read the note
  
  [ Colors Classes ]

  - We defined Colors as classes to dynamically switch between them
  { blue, red, yellow, purple, white }

  [ Main Structure ]

  + #notes
    + .add-note
    + .single-note.(color)
      + .notDone "Checkbox for To-Do Process"
      + input "Edit Title"
      + h2 "Print the title"
      + small "Print the date"
      + textarea "Edit Description"
      + p "Print the description"
      + .meta 
        + some "SPANSs" to control
      + .colors
      + .copied

  [ Fonts Used ]

  - Poppin 
    + Light
    + Medium
    + Regular
    + SemiBold

  - Toriom (Arabic) 
    + Light
    + Medium

  */

/* Embadded Fonts */
@font-face {
  font-family: 'font-awesome';
  src: url(fonts/fontawesome-webfont.ttf);
}

@font-face {
  font-family: 'glyphicons';
  src: url(fonts/glyphicons-halflings-regular.ttf);
}

@font-face {
  font-family: 'poppin-light';
  src: url(fonts/Poppins-Light.ttf);
}

@font-face {
  font-family: 'poppin-reg';
  src: url(fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family: 'poppin-med';
  src: url(fonts/Poppins-Medium.ttf);
}

@font-face {
  font-family: 'poppin-sbold';
  src: url(fonts/Poppins-SemiBold.ttf);
}

@font-face {
  font-family: 'toriom-med';
  src: url(fonts/toriom-medium.ttf);
}

@font-face {
  font-family: 'toriom-light';
  src: url(fonts/toriom-light.ttf);
}


/*
-------------------
  Const
-------------------
*/
body {
  background-color: #EFEFEF;
  direction: ltr;
}
input:focus,
textarea:focus {
  outline: none;
}

a:hover {
  text-decoration: none;
}
/*
-------------------
  Header
-------------------
*/
.header {
  width: 100%;
  height: 200px;
  background-color: #8A7CC5;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.29);
}
.header h2 {
  color: #fff;
  font-family: 'poppin-sbold';
  margin-top: 86px;
}
.hold-img {
  height: 200px;
  position: relative;
}
.header img {
  position: absolute;
  bottom: 0;
}
@media (max-width: 450px) {
  .header h2 {
    margin-top: 29px !important;
    margin-bottom: 0;
    text-align: center;
  }
  .hold-img {
    height: 138px !important;
  }
  .header img {
    height: 108px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*
-------------------
  Notes
-------------------
*/
.notes {
  margin: 45px 0 0;
}
/*-----Add Note-----*/
.notes .single-note input {
  width: 100%;
  border: none;
  background-color: unset;
  position: relative;
  margin-bottom: 10px;
}
.notes .single-note textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.notes .single-note textarea {
  width: 100%;
  margin-bottom: -10px !important;
  background-color: unset;
  resize: none;
  border: none;
  margin-top: -1px;
}
.notes .single-note input::placeholder {
  color: rgba(0, 0, 0, 0.17);
}
.notes .single-note textarea::-webkit-scrollbar {
  width: 7px;
}
.notes .single-note textarea::-webkit-scrollbar-thumb {
  background-color: #7c7c7c;
}
.notes .single-note textarea::-webkit-scrollbar-track {
  background-color: #cfcfcf;
}
/*-----Single Note-----*/
.notes .single-note {
  padding: 33px 33px 20px;
  position: relative;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.11);
  transition: all 0.3s;
  margin-bottom: 35px;
}
.notes .single-note:hover {
  box-shadow: 2px 7px 9px rgba(0, 0, 0, 0.11);
}
.notes .single-note .notDone {
  position: absolute;
  right: 20px;
  font-size: 20px;
  top: 20px;
  color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.notes .single-note h2,
.notes .single-note input {
  font-family: 'poppin-sbold', 'toriom-med';
  font-size: 23px;
  transition: all 0.3s;
  margin-top: 0;
}
.notes .single-note .isDone {
  text-decoration: line-through !important; 
  color: rgba(0, 0, 0, 0.3607843137254902) !important;
}
.notes .single-note small {
  font-family: 'poppin-light';
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
}
.notes .single-note hr {
    border-top: 1px solid rgba(0, 0, 0, 0.17);
    margin: 12px 0;
}
.notes .single-note textarea,
.notes .single-note p {
  font-family: 'poppin-reg', 'toriom-light';
  font-size: 16px;
  color: rgba(0, 0, 0, 0.69);
  margin-bottom: 28px;
  word-wrap: break-word;
  height: 85px;
  transition: all 0.3s ease-in-out;
  overflow: auto;
  line-height: 28px;
}
.expand {
  height: auto !important;
  overflow: unset !important;
}
.notes .single-note p::-webkit-scrollbar {
  width: 7px;
}
.notes .single-note p::-webkit-scrollbar-thumb {
  background-color: #7c7c7c;
}
.notes .single-note p::-webkit-scrollbar-track {
  background-color: #cfcfcf;
}
.notes .single-note .meta {
  margin: 25px auto 0;
  display: table;
}
.notes .single-note .meta span {
  margin: 0 12px;
  font-size: 23px;
  transition: all 0.2s;
  color: hsla(0, 0%, 0%, 0.2);
  cursor: pointer;
}
.notes .single-note .meta span:hover {
  color: rgb(0, 0, 0, 0.4)
}

/*------Colors------*/
.openDivs {
  transform: translateX(-50%) scale(1) !important;
}
/*.color-container {*/
/*    display: inline-block;*/
/*    white-space: nowrap;*/
/*    overflow-x: auto;*/
/*}*/

.colors,
.copied {
  display: -webkit-inline-box;
  padding: 15px;
  position: absolute;
  background-color: #fff;
  border-radius: 60px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.31);
  left: 50%;
  bottom: 60px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%) scale(0);
}
.copied {
  padding: 6px 15px;
  color: #fff;
  background-color: #3e3e3e;
  border-radius: 60px;
  font-family: 'poppin-light';
  left: 50%;
}
.colors .circle {
  width: 30px;
  height: 30px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 50%; 
}
.colors .circle.selected {
  border: 2px dashed #777;
}
.yellow {
  background-color: #FFEDA5 !important;
}
.blue {
  background-color: #BCE0FF !important;
}
.red {
  background-color: #FFB2B2 !important;
}
.purple {
  background-color: #B0A4E6 !important;
}
.white   {
  background-color: #fff !important;
}
.whiteCircle   {
  background-color: #fff !important;
  border: 1px solid #ccc;
}

.orange {
  background-color: #FFA500 !important;
}
.green {
  background-color: #008000 !important;
}
.cyan {
  background-color: #00FFFF !important;
}
.magenta {
  background-color: #FF00FF !important;
}
.yellowgreen {
  background-color: #9ACD32 !important;
}
.skyblue {
  background-color: #87CEEB !important;
}
.slategray {
  background-color: #708090 !important;
}
.darkorchid {
  background-color: #9932CC !important;
}
.salmon {
  background-color: #FA8072 !important;
}
.lime {
  background-color: #00FF00 !important;
}
.turquoise {
  background-color: #40E0D0 !important;
}
.coral {
  background-color: #FF7F50 !important;
}
.plum {
  background-color: #DDA0DD !important;
}
.gold {
  background-color: #FFD700 !important;
}
.lavender {
  background-color: #E6E6FA !important;
}
.olive {
  background-color: #808000 !important;
}
.teal {
  background-color: #008080 !important;
}
.darkslateblue {
  background-color: #483D8B !important;
}
.indianred {
  background-color: #CD5C5C !important;
}
.steelblue {
  background-color: #4682B4 !important;
}


/*
  =====================
  Shared Note
  =====================
*/
.shared-note {
  background-color: #2fa9d8;
}
.header.shared-note img {
  position: absolute;
  right: 20px;
  width: 41%;
  top: 14px;
}
.notes .single-note.shared p {
  height: auto !important;
  overflow: unset !important;
}

/*
  =====================
  #hash Notes
  =====================
*/
.hash {
  background-color: #607D8B;
}
.hash img {
  position: absolute;
  right: 20px;
  width: 28%;
  top: 24px;
}

/*
-----------------
  Footer
-----------------
*/
footer {
  margin: 0 0 40px;
}
footer span {
  display: block;
  text-align: center;
  font-family: 'poppin-med';
  color: #777;
}
footer span i {
  color: tomato;
}