@charset "UTF-8";
/* Base */
body {
  line-height: 1.7;
  font-weight: 400;
  font-size: 1rem;
  color: #999999;
}
*{
  color: #fff;
}
::-moz-selection {
  background: #FFFFFF;
  color: #FFFFFF; }

::selection {
  background: #FFFFFF;
  color: #FFFFFF; }

h1, h2, h3, h4, h5, h6, .site-logo, .add-portfolio {
  font-family: 'Rubik', sans-serif;
 }

.ticker-tape-underline{
  margin-top: -35px;
  width:100%;
  border-bottom: 1px solid #fff;
}

img {
  vertical-align: middle;
}

label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #fff; } /* CHECKBOX TEXT ATTRIBUTES */

input {
  background: #1e1f26; /* FORM BACKGROUND COLOR */
  color: white;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 6px 30px;
  font-family: 'Rubik', monospace;
  box-sizing: border-box;
}
::placeholder{
  text-transform: none;
}

input[id=portfolio_name] {
  color: #fff;
  margin-bottom: 10px;
  height: auto;
  font-family: "Nunito", sans-serif;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 3px;

}
input[id=initial_portfolio_value] {
  color: #fff;
  height: auto;
  font-family: "Nunito", sans-serif;

}

input:focus {
  outline: none;
}

/* ------------------------------------------ NAVBAR CSS >>>> ------------------------------------------ */

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  vertical-align: middle;
  background-color: black;
  /* float: left; */


}

.stock-search-bar {
  /* display: flex; */
  /* float: left; */
  width: 30%;
  height: 65%;
  margin: 0;
  margin-left: 20px;
  margin-right: auto;

}

#search-symbol {
  /* padding-top: 2%; */
}

.form-group {
  position: relative;
  overflow: hidden;
}

#app-navbar-logo {
  /* border: 1px solid red;
  border-radius: 20px; */
  margin-left: 40px;
  width: 25px;
  height: 25px;
}



#app-navbar-symbol-searchbar{
  text-transform: uppercase;
}

.app-navbar-item {
  border: 1px solid red;
  border-radius: 20px;
  margin-left: 20px;
  width: 40px;
  height: 40px;
}
/* ------------------------------------------ NAVBAR CSS <<<< ------------------------------------------ */


  .portfolio-display-scrollable-container {
    /* border: 2px solid pink; */
    height: 500px;
    overflow: auto;
  }

  .portfolio-display {
    border: 1px solid black;
    margin-bottom: 20px;
    height: 100px;
    border-radius: 7px;
    background: #16171A;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);

  }


  .portfolio-display-name {
    height: 100%;
    font-size: 25px;
    padding-top: 4%;

  }

  .portfolio-section {
    display: inline-block;
    /* width: 50%; */
    padding: 0 40px;
  }

  .market-overview {
    /* float: right; */
    display: inline-block;
    /* display: none; */
    width: 100%;
    height: 57%;
    font-family: 'Rubik', monospace;

  }

  .tradingview-widget-container {
    background: #2f2f2f;
    margin: 40px auto;
    border-radius: 3px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  }

  .chart-container {
    width: 80%;
    height: 80%;
    margin: 0 auto;

  }

  .portfolio-snippet {
    width: 100px;
    height: 200px;
    bottom: 50px;
    background: #1e1f26; /* CARD BACKGROUND COLOR */
    /* border: 2px solid; */
    /* border-radius: 5px; */
    /* border-color: #d4af37; */
    /* border-image-source: linear-gradient(90deg, red, yellow); */
    margin: 40px auto;
    padding: 0px;
    }

  .card-container {
    /* position: relative; */
    width: 500px;
    height: 600px;
    bottom: 50px;
    background: #2f2f2f; /* CARD BACKGROUND COLOR */
    border-radius: 3px;
    margin: 40px auto;
    padding: 0px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
  }

.portfolio-page {
  position: relative;
  width: 500px;
  height: 30px;
  right: 25%;
  bottom: 20px;
  background: transparent; /* CARD BACKGROUND COLOR */
  /* border-color: #d4af37; */
  /* border-image-source: linear-gradient(90deg, red, yellow); */
  margin: 20px auto;
  padding: 0px;
  text-align: center;
  font-family: 'Rubik', monospace;
}

.market-data{
  position: relative;
  width: 500px;
  height: 30px;
  left: 17.8%;
  bottom: 70px;
  background: transparent; /* CARD BACKGROUND COLOR */
  /* border-color: #d4af37; */
  /* border-image-source: linear-gradient(90deg, red, yellow); */

  margin: 20px auto;
  padding: 0px;
  text-align: center;
  font-family: 'Rubik', monospace;

}


button {
  display: inline-block;
  margin: 20px auto;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  border-radius: 3px;
  padding: 8px 20px;
  border: 0px solid #000;
}

button:focus {
  outline: none;
}

.regular-button-view {
  display: block;
  text-align: center;
}

.remove-button-view {
  display: none;
  text-align: center;
}

.add-button-hover {
  background: #686E78;
}

.add-button-hover:hover {
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
  background-color: #06d6a0;
}

.remove-button-hover {
  background: #686E78;
}

.remove-button-hover:hover {
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
  background-color: #06d6a0;
}


/* Initiate Auto-Pulse animations */
button.pulse-button {
  /* animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in; */
}

/* Initiate color change for pulse-on-hover */
button.add-button-hover {
  /* animation: addColorShift 10000ms infinite ease-in; */
}
button.remove-button-hover {
  /* animation: removeColorShift 10000ms infinite ease-in; */
}

/* Continue animation and add shine on hover */
button:hover,
button:focus {
  animation: borderPulse 1000ms infinite ease-out,
    /* addColorShift 10000ms infinite ease-in, */
    hoverShine 200ms;
}



#popup-1 .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}

#popup-1 .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background: #17141a;
  width:500px;
  height:190px;
  z-index:2;
  text-align:center;
  padding:20px;
  border: 1px solid black;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  font-family: "Nunito", sans-serif;
}

#popup-1 .close-btn {
  position: absolute;
  left: 24%;
  bottom: 20px;
  padding-top: 5px;
  width: 120px;
  height: 37px;
  background-color: #686E78;
  border-radius: 3px;

}

#popup-1 .add-btn {
  position: absolute;
  padding-top: 1px;
  right: 24%;
  bottom: 20px;
  padding-top: 5px;
  width: 120px;
  height: 37px;
  background-color: #686E78;
  border-radius: 3px;

}

#popup-1 .add-btn:hover{
  cursor: pointer;
  background-color: #06d6a0;
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

#popup-1 .close-btn:hover{
  cursor: pointer;
  background-color: #06d6a0;
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}


#popup-1 .confirm-btn {
  cursor: pointer;
  position: absolute;
  right: 30%;
  bottom: 20px;
  width: 80px;
  height: 30px;
  background: #EE6043;
  border-radius: 10%;
}

#popup-1 .cancel-btn {
  cursor: pointer;
  position: absolute;
  left: 30%;
  bottom: 20px;
  width: 80px;
  height: 30px;
  background: #6EEC72;
  border-radius: 10%;
}

#popup-1.active .overlay {
  display:block;
}

#popup-1.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}

.portfolio-name{
  position: relative;
  overflow: hidden;
  text-align: center;

}



#popup-2 .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}

#popup-2 .content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background: #1B1A1A;
  width:500px;
  height:125px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  border: 1px solid black;
  border-radius: 3px;
  font-family: 'Nunito', sans-serif;
}

#popup-2 .close-btn {
  cursor: pointer;
  position: absolute;
  left: 30%;
  bottom: 20px;
  width: 80px;
  height: 30px;
  background: #EE6043;
  border-radius: 10%;

}

#popup-2 .add-btn {
  cursor: pointer;
  position: absolute;
  right: 30%;
  bottom: 20px;
  width: 80px;
  height: 30px;
  background: #6EEC72;
  border-radius: 10%;

}

#popup-2 .confirm-btn {
  position: absolute;
  right: 24%;
  bottom: 20px;
  padding-top: 5px;
  width: 120px;
  height: 37px;
  background-color: #686E78;
  border-radius: 3px;

}

#popup-2 .cancel-btn {
  position: absolute;
  left: 24%;
  bottom: 20px;
  padding-top: 5px;
  width: 120px;
  height: 37px;
  background-color: #686E78;
  border-radius: 3px;
}

#popup-2 .cancel-btn:hover{
  cursor: pointer;
  background-color: #06d6a0;
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}


#popup-2 .confirm-btn:hover{
  cursor: pointer;
  background-color: #06d6a0;
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}


#popup-2.active .overlay {
  display:block;
}

#popup-2.active .content {
  transition:all 300ms ease-in-out;
  transform:translate(-50%,-50%) scale(1);
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.ticker-tape {
  pointer-events: none;
}

#watchlist {
  border: 1px solid grey;
  border-collapse: collapse;
  width: 770px;
  border-radius: 3px;
  margin-left: 43.25%;
  margin-top: -25%;
  overflow: auto;


}

#watchlist td {
  border: 1px solid grey;
  padding: 8px;
  /* background: lightblue; */
}

#watchlist th {
  padding: 8px;
  background: #16171A;
}

#watchlist tr:nth-child(even) {
  background-color: #16171A;
}

#watchlist tr:hover {
  background-color: white;
}

.portfolio-hover-preview {
  /* float: right; */
  /* display: inline-block; */
  display: none;
  width: 100%;
  height: 57%;
  /* margin-bottom: 1.5%; */

}

.wrapper {
  display: flex;
  margin: 0 auto;
  margin-top: 1%;
  width: 1440px;
}

#dashboard-right-elements {
  width: 100%;
}

.text-center{
  font-size: 25px;
  transform: translate(0%, 55% );
}



.portfolio-stats {
  display: flex;
  background: #2f2f2f;
  height: 80%;
  width: 91%;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 3px;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
}

.portfolio-value-dash {
  /* border: 1px solid red; */
  /* display: flex; */
  position: relative;
  width: 140px;
  height: 140px;
  background: #16171A;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  margin: auto;


}

.percent-change-dash {
  /* border: 1px solid red; */
  position: relative;
  width: 140px;
  height: 140px;
  background: #16171A;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  margin: auto;

}

.chartDims {
  width: 140px;
  height: 140px;
  /*border: 2px solid white;*/
}

#percent-text {
  /* border: 1px solid red; */
  position: absolute;
  top: 37%;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

#port-value-text {
  /* border: 1px solid red; */
  position: absolute;
  top: 37%;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

#newDashCircleStats {
  width: 30%;
  height: 100%;
  margin: auto;
  padding: auto;

}

.newDashCircleStatsElem {
  margin-top: 6%;
}

.chart-container{
  height: 100%;
  width: 65%;
  margin: 0;
  margin-left: 5%;
}

 #myChart{
   /*border: 2px solid white;*/

 }

 #dashboardTables {
   background: #2f2f2f;
   width: 91%;
   height: 250px;
   margin: auto;
   margin-top: 2%;
   border-radius: 3px;
   box-shadow:
   0 2.8px 2.2px rgba(0, 0, 0, 0.034),
   0 6.7px 5.3px rgba(0, 0, 0, 0.048),
   0 12.5px 10px rgba(0, 0, 0, 0.06),
   0 22.3px 17.9px rgba(0, 0, 0, 0.072),
   0 41.8px 33.4px rgba(0, 0, 0, 0.086),
   0 100px 80px rgba(0, 0, 0, 0.12);

 }

 #dashboard-watchlist {
   overflow: auto;
 }

 .dashboard-page-table {
   /* display: flex; */
   /* float: left; */
   /*border: 2px solid red; */
   width: 100%;
   height: 100%;
   padding: 10px;
   padding-top: 5px;
 }

 .dashboard-watchlist-table-row:not(:first-child) {
   padding-top: 2px;
   cursor: pointer;
 }

 .dashboard-watchlist-table-row:not(:first-child):hover {
   background-color: #585858;
 }

.dashboard-watchlist-table-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 16%;
  font-family: 'Rubik', sans-serif;
}

span {
   color: #828282;
   font-family: "Nunito", sans-serif;
}



 .dashboard-watchlist-table-divide {
   display: flex;
   align-items: center;
   width: 25%;
   height: 100%;
   font-family: "Nunito", sans-serif;
 }

 .portfolioHoverNameNULLED {
   background: #16171A;
   width: 30%;
   margin: auto;
   padding: 8px;
   border-radius: 7px;

 }

 .loader-wrapper {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #16171A;
   display:flex;
   justify-content: center;
   align-items: center;
 }
 .loader {
   display: inline-block;
   width: 30px;
   height: 30px;
   position: relative;
   border: 4px solid #Fff;
   animation: loader 2s infinite ease;
 }
 .loader-inner {
   vertical-align: top;
   display: inline-block;
   width: 100%;
   background-color: #fff;
   animation: loader-inner 2s infinite ease-in;
 }
 @keyframes loader {
   0% { transform: rotate(0deg);}
   25% { transform: rotate(180deg);}
   50% { transform: rotate(180deg);}
   75% { transform: rotate(360deg);}
   100% { transform: rotate(360deg);}
 }
 @keyframes loader-inner {
   0% { height: 0%;}
   25% { height: 0%;}
   50% { height: 100%;}
   75% { height: 100%;}
   100% { height: 0%;}
 }

 #navbar-dash{
   margin-left: 30px;
   margin-right: 10px;
   margin-top: 10px;
 }

 #navbar-dash:hover{
   -webkit-transform: scale(1.4);
   transform: scale(1.4);
   -o-transition: .2s all ease;
   transition: .2s all ease;
 }

 #navbar-marketplace{
   margin-left: 30px;
   margin-right: 10px;
   margin-top: 10px;
 }

  #navbar-marketplace:hover{
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    -o-transition: .2s all ease;
    transition: .2s all ease;
  }

 #navbar-competitive{
   margin-left: 30px;
   margin-right: 10px;
   margin-top: 10px;
 }

  #navbar-competitive:hover{
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    -o-transition: .2s all ease;
    transition: .2s all ease;
  }

  #navbar-social{
    margin-left: 30px;
    margin-right: 10px;
    margin-top: 10px;
  }

   #navbar-social:hover{
     -webkit-transform: scale(1.4);
     transform: scale(1.4);
     -o-transition: .2s all ease;
     transition: .2s all ease;
   }

   #navbar-guide{
     margin-left: 30px;
     margin-right: 10px;
     margin-top: 10px;
   }

  #navbar-guide:hover{
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
      -o-transition: .2s all ease;
      transition: .2s all ease;

    }

 #navbar-user{
   margin-left: 30px;
   margin-right: 30px;
   margin-top: 10px;

 }

 #navbar-user:hover{
   -webkit-transform: scale(1.4);
   transform: scale(1.4);
   -o-transition: .2s all ease;
   transition: .2s all ease;
 }

 /* LOADER CSS ----> */
 /* LOADER CSS ----> */
 /* LOADER CSS ----> */

 .coming-soon-container{
   width: 400px;
   margin: 12em auto;
   padding-top: 10px;
   padding-bottom: 35px;
   text-align: center;
 }

 #login-loading-screen{
   display: none;
 }

 #login-load-text{
   color: whitesmoke;
   margin-top: 5%;
   font-family: "Rubik", sans-serif;
 }

 .loader {
   position: relative;
   margin-top: 5%;

   width: 64px;
   height: 64px;
   border-radius: 50%;
   perspective: 800px;
 }

 .inner {
   position: absolute;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }

 .inner.one {
   left: 0%;
   top: 0%;
   animation: rotate-one 1s linear infinite;
   border-bottom: 3px solid #256eff;
 }

 .inner.two {
   right: 0%;
   top: 0%;
   animation: rotate-two 1s linear infinite;
   border-right: 3px solid #ff495c;
 }

 .inner.three {
   right: 0%;
   bottom: 0%;
   animation: rotate-three 1s linear infinite;
   border-top: 3px solid whitesmoke;
 }

 @keyframes rotate-one {
   0% {
     transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
   }
   100% {
     transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
   }
 }

 @keyframes rotate-two {
   0% {
     transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
   }
   100% {
     transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
   }
 }

 @keyframes rotate-three {
   0% {
     transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
   }
   100% {
     transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
   }
 }