html{
    height: 100%;
    margin: 0;
    font-size:10pt;
}



  @media only screen
    and (max-device-width : 480px){
     .desk {display: none;}

  }

  @media only screen
    and (min-device-width : 480px)
    and (max-device-width : 770px){
     .mobi { display: none;}

  }


  @media only screen
    and (min-device-width : 770px){
     .mobi { display: none;}
  }




body{
    background-color:rgb(36,116,204);
    height: 100%;
    margin: 0;
    font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: rgb(0, 34, 55);
}

.nice_font {
  font-family:"Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

th{
    font-weight: 600;
}


.table > thead > tr > th {
  border: 0 !important
}


.main-container{
  background-color:white;
}

.left-bar-container{
  background-color:rgb(247,247,251);
}

.api-section{
  background-color:white;
}

.api-summary-box{
  background-color:rgb(247,247,251);
}

.api-dict-examples {
  background-color:rgb(240,240,240);
  color:black;
}

.plans-container{
  background-color:white;
  border: 1px solid rgb(230,230,230);
}


.background{
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.left_bar_row {
    font-weight:600;
    color:grey;
    padding:5px;
    padding-left:27px;
    cursor:pointer;
}


.left_bar_row:hover {
    background-color: rgb(251,251,254);
    filter: grayscale(0%);
    border-right: 4px solid rgb(245,240,252);
}


.left_bar_row-selected {
    background-color: rgb(247,247,251);
    font-weight:600;
    filter: grayscale(0%);
    border-right: 4px solid rgb(36,116,204);
    color: rgb(36,116,204);
    padding:5px;
    padding-left:27px;
    cursor:pointer;
}

.left_bar_row_noclick {
    font-weight:600;
    color:grey;
    padding:5px;
    padding-left:27px;
}

.left_bar_icons {
    height:22px;
    width:22px;
    border-radius:10px;
    cursor:pointer;
}


.badge-superscript {
  background-color: rgb(36,116,204);
  color:white;
}


.left_bar_logo {
  height:25px;
  cursor:pointer;
  margin-left:18px;
  margin-top:15px;
  border-radius:20px;
}


.landing_main_title {
    color:black;
    font-weight:400;
    margin:0px;
    font-size:2.25rem;
    line-height:3rem;
}


.landing_second_line {
    color:white;
    font-weight:400;
    margin:0px;
    font-size:14pt;
    line-height:2rem;
}

.recent_address_row {
    width:100%;
    display: table;
    padding-left:20px;
    padding-right:20px;
    text-align:left;
    cursor:pointer;
}

.intro_panels {
  border: 1px solid rgb(230, 230, 230);
  border-radius:10px;
  height:280px;
  cursor:pointer;
  padding:30px;
}


.intro_panels:hover {
  -webkit-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
  -moz-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
  box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
}

.intro_panels_mobi {
  border: 1px solid rgb(230, 230, 230);
  border-radius:10px;
  cursor:pointer;
  padding:20px;
  -webkit-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
  -moz-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
  box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
}


.recent_address_row_mobile {
    width:100%;
    display: table;
    padding-left:10px;
    padding-right:10px;
    text-align:left;
    cursor:pointer;
}


.recent_address_row:hover {
    background-color:rgb(247,247,251);
}

.portfolio_insights_row {
    width:100%;
    display: table;
    padding-left:20px;
    padding-right:20px;
    text-align:left;
}


.portfolio_insights_row_mobi {
    width:100%;
    display: table;
    padding-left:10px;
    padding-right:10px;
    text-align:left;
}

.underline:hover {
  text-decoration: underline;
}


.panel-border{
  border: 1px solid rgb(230,230,230);
}

.horizontal-line{
  border-color:rgb(230,230,230);
}

.last-update {
  background-color:rgb(247,247,251);
  color:grey;
}

.ribbon_value_panel {
  color:white;
  background-color: rgba(36,116,204, 1);
  border-radius:10px;
  height:90px;
  padding-top:10px;
  padding-left:20px;
  padding-right:18px;
  font-weight:600;
}

.ribbon_value_panel_main_text {
  color:white;
  line-height:36pt;
  font-size:14.5pt;
}


.ribbon_value_panel_mobi {
  color:white;
  background-color: rgba(36,116,204, 1);
  border-radius:10px;
  padding-top:10px;
  padding-left:20px;
  padding-right:12px;
  padding-bottom:8px;
  font-weight:600;
}

.ribbon_value_panel_main_text_mobi {
  color: white;
  line-height:30pt;
  font-size:16pt;
}

.ribbon_value_panel_mobi_test {
  color:black;
  border-radius:10px;
  padding-top:10px;
  padding-left:20px;
  padding-right:12px;
  padding-bottom:8px;
  font-weight:600;
}

.ribbon_value_panel_main_text_mobi_test {
  color: black;
  line-height:30pt;
  font-size:16pt;
}


.insights-chart-legend{
  background-color:rgb(247,247,251);
}

.etherscan-link{
  color:black;
}

.chart_header_container_desktop{
  padding:20px;
  padding-bottom:10px;
  font-weight:600;
}

.chart_external_frame_desktop {
  padding:20px;
  padding-bottom:10px;
  padding-top:10px;
}

.individual-panel{
  background-color:white;
  border-radius:10px;
}

.chart_legend_container {
  height:60px;
}

.chart_actual_perimeter {
  height:220px;
}

.chart_timeframe_button {
  font-size:9pt;
  display:inline-block;
  border-radius:15px;
  padding:3px;
  padding-left:10px;
  padding-right:10px;
  background-color:rgb(247,247,251);
  cursor:pointer;
  color:grey;
}

.chart_timeframe_button:hover {
  background-color:rgb(240,240,244);
  color:black
}

.chart_timeframe_button-selected {
  font-size:9pt;
  font-weight: 600;
  display:inline-block;
  border-radius:15px;
  padding:3px;
  padding-left:10px;
  padding-right:10px;
  background-color:rgb(247,247,251);
  cursor:pointer;
  color:black;
}

.chart_timeframe_button-selected:hover {
  background-color:rgb(240,240,244);
}


.chart_background {
  background-color:rgba(247,247,251,0.4);
  border-radius:10px;
  padding:10px;
  color:black;
  font-size:9pt;
}


@keyframes animatedBackground {
 from {
   background-position: 0 0;
 }
 to {
   background-position: 3000px 0;
 }
}


.chart_background_loading {
 background-image: linear-gradient(
   90deg,
   #ffffff 0%,
   #fafafb 100%
 );
 background-position: 0px 0px;
 background-repeat: repeat;
 animation: animatedBackground 5s linear infinite;
 border-radius:10px;
 padding:10px;
 color:black;
 font-size:9pt;
}




.pool_images{
  width:25px;
  margin:2px;
  margin-left:-10px;
  border-radius: 50%;
  border:2px solid white;
  background-color:white;
}


.exceeding_images_circle{
  color:black;
  display:inline-block;
  width:25px;
  margin-left:-27px;
  text-align:center;
  font-size:8pt;
}


.pool_images_pool_ranking{
  width:20px;
  border-radius: 50%;
  border:1px solid rgb(230,230,230);
  background-color:white;
}

.exceeding_images_circle_pool_ranking{
  display:inline-block;
  width:20px;
  margin-left:-22px;
  text-align:center;
  font-size:8pt;
}



.rotated-text {
  transform: rotate(-90deg);
  transform-origin: right, top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin:right, top;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin:right, top;
  position: absolute;
}

.code-example {
    background-color:rgb(50,50,50);
    color:white;
    border-radius: 10px;
    padding:20px;
    font-size:9pt;
}

.landing_transparent_button {
    background-color:rgba(255,255,255,0.5);
    border-radius:25px;
    width:180px;
    height:50px;
    text-align:center;
    padding-top:10px;
    cursor:pointer;
    color:white;
    font-weight:500;
    font-size:14pt;
}

.landing_transparent_button:hover {
    background-color: rgba(255,255,255,0.3);
}

.landing_white_button {
    background-color:rgb(255,255,255);
    border-radius:25px;
    width:180px;
    height:50px;
    text-align:center;
    padding-top:10px;
    cursor:pointer;
    color:rgb(36,116,204);
    font-weight:500;
    font-size:14pt;
}

.new_table_style{
    background-color:rgb(247,247,251);
    border-color:rgb(197,197,205);
}

.landing_white_button:hover {
    background-color: rgba(255,255,255,0.5);
    color:white;
}

.current_plan {
    background-color:rgb(255,255,255);
    border-radius:17.5px;
    width:120px;
    height:35px;
    text-align:center;
    color:rgb(36,116,204);
    font-weight:600;
    font-size:11pt;
    border: 1px solid rgb(36,116,204);
    display:table-cell;
    vertical-align: middle;
}


.show_more_button {
    display:inline-block;
    width:160px;
    cursor:pointer;
    border-radius:20px;
    height:35px;
    border-radius:17.5px;
    text-align:center;
    color:rgb(36,116,204);
    font-weight:600;
    border: 1px solid rgb(36,116,204);
    display:table-cell;
    vertical-align: middle;
}

.show_more_button:hover {
    background-color:rgb(36,116,204, 0.05);
}




.grayscale {
    filter: grayscale(100%);
}

.color {
    filter: grayscale(0%);
}

.refresh_button {
    background-color:rgb(36,116,204);
    width:35px;
    cursor:pointer;
    border-radius:17.50px;
    height:35px;
    padding-top:-0.5px;
    padding-left:2px;
    text-align:center;
    font-size:14pt;
    border: 1px solid rgb(36,116,204);
}


.refresh_button:hover {
    background-color:rgba(36,116,204,0.85);
    border: 1px solid rgba(36,116,204,0.85);
}

.content_section {
   width:80%;
   position:relative;
   margin: 0 auto;
   padding:10px
   vertical-align: middle;
}

.yellow_bar_button {
    background-color:rgb(255,192,0);
    border-radius:15px;
    width:80px;
    height:30px;
    text-align:center;
    padding-top:2px;
    cursor:pointer;
    color:white;
    font-weight:500;
    font-size:12pt;
}


.remove_button {
    width:30px;
    height:30px;
    border-radius:15px;
    background-color:rgb(235,230,242);
    text-align:center;
    cursor:pointer;
}

.remove_button:hover {
    background-color:rgb(215,210,222);
}


.remove_button_small {
    width:25px;
    height:25px;
    border-radius:12.5px;
    background-color:rgb(235,230,242);
    text-align:center;
    cursor:pointer;
    display:table-cell;
    vertical-align:middle;
    font-size:0pt;
}

.remove_button_small:hover {
    background-color:rgb(215,210,222);
}


.add_pool_button_small {
    width:25px;
    height:25px;
    border-radius:12.5px;
    background-color:rgb(235,230,242);
    text-align:center;
    cursor:pointer;
}

.add_pool_button_small:hover {
    background-color:rgb(215,210,222);
}




.twitter_icon {
  color:grey;
  font-size:16pt;
  text-decoration: none;
}

.twitter_icon:hover {
  color:rgb(36,116,204);
  text-decoration: none;
}

.strike {
  text-decoration: line-through;
}

.not-strike {
  text-decoration: none;
}


.green_bar_button {
    background-color:rgba(75, 192, 192, 1);
    border-radius:15px;
    width:60px;
    height:30px;
    text-align:center;
    padding-top:5px;
    cursor:pointer;
    color:white;
    font-size:10pt;
    font-weight:600;
}

.green_bar_button:hover {
    background-color:rgb(75, 192, 192,0.85);
}


.form_button {
    background-color:rgb(36,116,204);
    border-radius:17.5px;
    width:100px;
    height:35px;
    text-align:center;
    cursor:pointer;
    color:white;
    font-weight:600;
    display:table-cell;
    vertical-align: middle;
}

.form_button:hover {
    background-color:rgb(36,116,204,0.85);
}

.form_button_grey {
    background-color:rgb(240,240,244);
    border-radius:17.5px;
    width:100px;
    height:35px;
    text-align:center;
    padding-top:6px;
    cursor:pointer;
    color:grey;
    font-weight:600;
}


.form_button_grey:hover {
    background-color:rgb(235,235,240);
}




.pool_button {
  display:inline-block;
  background-color:rgb(255,255,255);
  color:rgb(36,116,204);
  border: 1px solid rgb(36,116,204);
  border-radius:17.5px;
  width:100px;
  height:35px;
  text-align:center;
  padding-top:7px;
  cursor:pointer;
  font-weight:600;
}


.pool_button_selected {
    display:inline-block;
    background-color:rgb(36,116,204);
    color:rgb(255,255,255);
    border: 1px solid rgb(36,116,204);
    border-radius:17.5px;
    width:100px;
    height:35px;
    text-align:center;
    padding-top:7px;
    cursor:pointer;
    font-weight:600;
}







.shadow {
   -moz-box-shadow: 0px 0px 10px 0px #ccc;
   -webkit-box-shadow: 0px 0px 10px 0px #ccc;
   box-shadow: 0px 0px 10px 0px #ccc;
}

.new_shadow {
-webkit-box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
-moz-box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
}

.new_shadow_light {
-webkit-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
-moz-box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
box-shadow: 2px 2px 10px 2px rgba(235,230,242,0.5);
}


.adaptable-cloud-container{
    position:absolute;
    top:10%;
    left:0;
    right:0;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

 .form-control-custom{
    display:block;
    width:100%;
    height:calc(2.25rem + 2px);
    padding:.375rem .75rem;
    font-size:1rem;
    line-height:1.5;
    color:#495057;
    background-color:#fff;
    background-clip:padding-box;
    border:1px solid #ced4da;
    border-radius:.25rem;
    transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.search_bar{
    padding-left:25px;
    height:40px;
    border-radius:20px;
    outline:none;
-webkit-box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
-moz-box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
box-shadow: 2px 2px 10px 2px rgba(235,230,242,1);
}


.search_bar_light{
    padding-left:25px;
    height:40px;
    border-radius:20px;
    outline:none;
}


.asset_tag {
  display:table-cell;
  vertical-align:middle;
  height:40px;
  border-radius:20px;
  border: 1px solid rgb(230,230,230);
  padding-left:9px;
  padding-right:25px;
  text-align:center;
  cursor:pointer;
}

.asset_tag:hover {
  background-color:rgb(250,250,250);
}


.asset_tag_logo {
  height:25px;
  width:25px;
  margin-top:-2px;
  margin-right:-10px;
  border-radius:15px;
  border: 2px solid white;
  background-color:white;
}


.asset_tag_text{
  display:inline-block;
  margin-top:4px;
  padding-left:10px;
  font-weight:600;
}


.grey_text{
    color:rgb(154, 160, 172);
}

.dashed_link:hover{
    color:rgb(36,116,204);
}


.bar_button{
    display: table-cell;
    width:100px;
    text-align:center;
    color:rgb(154, 160, 172);
    padding:15px;
    cursor:pointer;
}

.bar_button:hover {
    color:rgb(134, 140, 152);
    border-bottom: 2px solid rgb(114, 120, 132);
}

.bar_button-selected{
    display: table-cell;
    width:100px;
    text-align:center;
    border-bottom: 2px solid rgb(36,116,204);
    color:rgb(36,116,204);
    padding:15px;
    cursor:pointer;
}




/* CSS for the toggle switch*/


/* The switch - the box around the slider */

.switch {
   position: relative;
   display: inline-block;
   width: 75px;
   height: 35px;
}


/* Hide default HTML checkbox */

.switch input {
   display: none;
}


/* The slider */

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgb(197,197,205);
   -webkit-transition: .4s;
   transition: .4s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 31px;
   width: 31px;
   left: 2px;
   bottom: 2px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}

input:checked+ .slider {
   background-color: rgb(36,116,204);
}

#ex1Slider .slider-selection {
   background: rgb(197,197,205);
}

input:focus+ .slider {
   box-shadow: 0 0 1px rgb(197,197,205);
}

input:checked+ .slider:before {
   -webkit-transform: translateX(40px);
   -ms-transform: translateX(40px);
   transform: translateX(40px);
}


/* Rounded sliders */

.slider.round {
   border-radius: 35px;
   text-align:left;
}

.slider.round:before {
   border-radius: 50%;
}


.switch_text {
    margin-top:7px;
    margin-left:38px;
    color:white;
    font-weight:600;
}

.switch_text-selected {
    margin-top:7px;
    margin-left:10px;
    color:white;
    font-weight:600;
}



/* Hamburger CSS*/


.topnav {
  overflow: hidden;
  background-color: white;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: grey;
  height:50px;
  padding:13px;
  padding-right:20px;
  padding-left:20px;
  text-decoration: none;
  display: block;
  font-weight: 600;
}

.topnav a.icon {
  color:black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}



.active {
  color: white;
}






.tweet_card {
  border: 1px solid rgb(210,210,210);
  border-radius:20px;
  padding:15px;
  color:black;
  width:450px;
  margin-left:20px;
  margin-right:20px;
  cursor:pointer;
}

.tweet_card:hover {
  background-color: rgba(29, 161, 242, 0.02);
}

.tweet_image {
  border: 1px solid rgb(210,210,210);
  border-radius:20px;
  width:100%;
  margin-top:20px;
}

.tweet_body {
  font-size:14pt;
  margin-top:20px;
}

.tweet_name_container {
  display:table-cell;
  vertical-align:middle;
  padding-left:10px;
}


.tweet_photo_container {
  width:46px;
  display:table-cell;
  vertical-align:middle;
}


.tweet_icon_container {
  display:table-cell;
  vertical-align:middle;
  width:50px;
  text-align:right;
  color:rgb(29, 161, 242);
}