/*-------------------
      HEADER
--------------------*/
#cs-header {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
/*
#cs-header .item {
  padding:0;
} */

#cs-header .logo {
  background: none;
  height: 76px;
  margin: 4px;
  width: auto;
}

#csTicker {
  position: fixed;
  top: 94px;
}

.cs-sector-treemap {
  margin-top: 128px;
}

#cs-header h1.ui.header > span {
  color: #000;
  font-size: 0.7em;
}

#cs-header-menu {
  background-color: white;
  border: none;
  top: 52px;
}

#cs-header-menu .ui.dropdown i.dropdown.icon {
  margin-left: 5px;
}

#cs-header-menu .ui.dropdown .menu {
  border-color: #707175;
}

#cs-header-mobile .mobile-menu {
  background:rgba(0, 0, 0, 0.92);
}

#cs-header-mobile .mobile-menu .search-bar {
  background:none;
}

#cs-header-mobile .search-bar-menu {
  background-color: #767676 !important;
}

#cs-header-menu .right.menu {
  width:980px;
  background:grey;
  position: relative;
  border-top-right-radius: 10px;
}

#cs-header-menu .right.menu:before {
  content:'';
  background:grey;
  position: absolute;
  width:2em;
  top:0px;
  left:-1em;
  transform: skew(-10deg);
  height:100%;
  border-top-left-radius: 10px;
}

#cs-header-menu .logo-wrapper {
  width:180px;
}

#cs-header-menu .logo-wrapper .logo {
  width: auto;
  position: absolute;
  bottom: 15px;
  height:160%;
}

#cs-header-menu .right.menu .item {
  margin:auto;
  padding:7px 5px;
  font-size: small;
}

#cs-header-menu .item {
  font-weight: 300;
}

#cs-header-menu .item.home {
  margin-left: 0;
}

#cs-header-menu.ui.inverted.menu .ui.dropdown .menu {
  background: #707175;
}

#cs-header-search .ui.input input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#cs-header-search .ui.input input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}
#cs-header-search .ui.input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#cs-home-calendar {
  height: 506px;
  overflow-y: scroll;
}

.cs-content {
  margin-top: 122px !important;
}

/*-------------------
      CHART
--------------------*/
.cs-chart-timeseries.dark .bg {
  fill: #707175;
}

.cs-chart-timeseries.dark .x-grid, .cs-chart-timeseries.dark .y-grid {
    stroke: #7E7F80;
}

/*-------------------
   COMPANY CHART
--------------------*/

#cs-company-chart .cs-chart-options .ui.secondary.menu .active.item {
  background-color: #707175 !important;
}

#cs-company-tabs .ui.inverted.blue.menu {
  background-color: #707175;
  top: 128px;
}

#cs-company-tabs .ui.inverted.pointing.menu .active.item:after {
  background-color: #707175 !important;
}

@media only screen and (max-width: 800px) {
  #cs-company-tabs .ui.inverted.blue.menu {
    top: 94px;
    left: 0px;
    width: 100%;
  }

  #csTicker {
    z-index: 20;
  }
}

/*-------------------
  SECTORS OVERVIEW
--------------------*/
#cs-sectors {
  background: #424242;
  margin-top: 122px;
  border-top: 1px solid #ccc;
  padding-bottom: 2em;
}

#cs-sectors-header {
  top: 128px;
}

#cs-sectors #cs-sectors-header {
  background: #424242;
}

.cs-grid .body .row:hover .cell.sector {
  background: #666;
}

.cs-grid .head {
  top: 206px;
  background: #424242;
}

.cs-grid .body {
  padding-top: 31px;
}

.cs-grid .body .cell .text {
  border-color: #424242;
}

#cs-companies-grid .body {
  padding-top: 52px;
}

#cs-companies > .sixteen.wide.column {
  padding-top: 0px;
}

@media only screen and (max-width: 800px) {
  #cs-sectors {
    margin-top: 105px;
  }

  .cs-grid .body {
    padding-top: 20px;
  }

  .cs-grid {
    margin-top: 0;
  }

  .cs-grid .head {
    top: initial;
  }

  #cs-sectors-header {
    top: 5px;
  }

  #cs-companies-grid .body {
    padding-top: 2px;
  }
}


/*-------------------
  TECHNICALS MENU
--------------------*/
#cs-technicals-menu {
  background-color: #4D4E52;
}

#cs-technicals-chart {
  margin-bottom: 2em;
}

/*-----------------------
 * COMPANY SPECIFIC
 * --------------------*/

#cs-header h1.ui.header.e-falahtrade {
  color: #DD251B;
}

#cs-header h1.ui.header.testsecurities {
  color: blue;
}

@media only screen and (max-width: 800px) {
  #cs-header-mobile {
    background-color: #fff !important ;
    display: block;
  }

  #cs-header-mobile .logo {
    width: auto;
    height: 42px;
  }

  #cs-header-mobile .logo-wrapper {
    background: none ;
  }

  #cs-header-mobile .mobile-btn {
    color:#707175;
  }

  .cs-content {
    margin-top: 0.5em !important;
  }
}

/*-----------------------
 * Company Table
 * --------------------*/

.cs-financial-table .cs-table-fixed-header {
  top: 174px;
}

@media only screen and (max-width: 800px) {
  .cs-financial-table .cs-table-fixed-header {
    top: 150px;
  }
}

/*-----------------------
 * Company Footer
 * --------------------*/

#cs-footer {
  margin-top: 1em; background-color: grey !important;
}


#ef-landing {
  position: relative;
  width: 100%;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  #ef-landing {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.logo {
  margin-top: 20px;
}

.logo img {
  width: 136px;
  border: 1px solid #ccc;
}

.ui.header {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  font-weight: bold;
}

h1.ui.header {
  margin-top: 1em;
}

p { font-size: 1.4em; }

#popup {
  max-width: 900px;
  width: 100%;
  position: fixed;
  left: calc(50% - 450px);
  /* margin-left: -210px; */
  top: 90px;
}

#popup .ui.segments {
  box-shadow: 0 0 10px;
  background: rgba(255,255,255,0.9);
}

#popup .ui.segment {
  flex: 1;
}

#popup .ui.button {
    background-color: rgb(18, 64, 104);
}

@media only screen and (max-width: 767px) {
  #popup {
    position: absolute;
    width: 100%;
    left: 0;
    margin-left: 0;
    top: 40px;
  }

  #popup .ui.segments {
    display: block;
  }
}

@-webkit-keyframes wobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  25%  { -webkit-transform:  rotate(-2deg); }
  50%  { -webkit-transform:  rotate(0deg); }
  75%  { -webkit-transform:  rotate(2deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
.wobble { -webkit-animation: wobble 0.2s infinite; }