/*@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);*/
html,
body {
  font-family: 'Roboto Condensed';
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  overflow: hidden;
}

.ggo-modal.hidden , .ggo-modal-container.hidden{
 visibility: hidden;
}

.ggo-modal-container.hidden{
  background-color: rgba(0, 0, 0, 0);
}

.ggo-modal-container.hidden .ggo-modal{
  opacity: 0;
  transform: scale(.5);
}

.ggo-modal-container {
  opacity: 1;
  /*force modal container to take all screen*/
  position: fixed;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  /* create an overlay that can't be clicked through */
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.3);
  /* use flexbox to center vertically and horizontally */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 20px;
  /* add padding so that modal never goas all the way to the sides */
  box-sizing: border-box;
  transition: all 150ms ease-in-out;
}

.ggo-modal {
  /* use flex to organize header, content, footer in column that stretch to the right */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background-color: #fff;
  max-height: 100%;
  /*prevent from going higher than window => will force shrink of children */
  min-width: 300px;
  /* min-width needed to make sure children will shrink horizontally*/
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  border-radius: 2px;
  min-height: 200px;
  opacity: 1;
  //transform: scale(1) ;//translateY(0);
  //transform: translateY(0);
  transition: all 250ms cubic-bezier(.64,.24,.85,1.44);
}

.ggo-modal > div {
  pointer-events: visible;
  /* reactivate pointer-events at this level */
  width: 100%;
  /* force header, content, footer to stretch */
  padding: 5px;
  position: relative;
  /*to enable absolute positioning in children */
}

.ggo-modal * {
  box-sizing: border-box;
  /* force border-box calculation to prevent issues with padding */
}

.ggo-modal-header {
  min-width: 200px;
  /* min-width needed to make sure children will shrink horizontally*/
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  /* prevent shrinking vertically */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  /*sticks title to the left and close button to the right*/
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.ggo-modal-title {
  /* activate text truncate for the title */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ggo-modal-close {
  width: 30px;
  /* force width to prevent shrink horizontally => only title will shrink */
  text-align: center;
}

.ggo-modal-content {
  /* create only vertical scrollbars. Horizontal ones will be created in sections*/
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

/* create only horizontal scrollbars if needed. If overflow vertically,
push the content div which will be the one with the scrollbar */
/*
.ggo-modal-section {
  overflow-y: hidden;
  overflow-x: auto;
}
*/

.ggo-modal-section.flex {
  /* special section type with flex enabled to be able to wrap children div */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ggo-modal-section.flex > div {
  /* prevent shrink or grow of flex section children */
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.ggo-modal-section h1,
.ggo-modal-section p {
  /* force h1 and p in sections to take whole width */
  width: 100%;
  font-size: 16px;
  margin: 0;
}

.ggo-modal-section h1,
.ggo-modal-section p {
  /* force h1 and p in sections to take whole width */
  width: 100%;
  font-size: 16px;
  margin: 0;
}

.ggo-modal-section p {
  max-width: 500px;
}

.ggo-modal-footer {
  /* use flex to stick all footer buttons to the right */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  /* prevent footer to shrink height */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}

.ggo-modal-footer > a {
  margin: 0 5px 5px 0;
}


/* side margins for footer buttons */

.ggo-modal-footer > a:first-child {
  margin-left: 0;
}


/* remove left margin for leftmost button */

.ggo-modal-footer > a:last-child {
  margin-right: 0
}


/*remove right-margin for rightmost button */

.ggo-modal-footer .btns-left {
  position: absolute;
  left: 5px;
}


/*leftmost button can have class 'left' to be forced to the left side*/


/*---- Just for this mockup----*/

.ggo-modal-section h1,
{
  font-size: 16px;
}

.content-placeholder,
.content-expandable {
  display: block;
  width: 500px;
  height: 30px;
  border: 1px solid #ddd;
  color: #aaa;
  padding: 20px;
  margin: 10px 0;
  background-color: #ddd;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, .5) 5px, rgba(255, 255, 255, .5) 10px);
}

.content-expandable.expanded {
  height: 300px;
}

.content-placeholder:before {
  content: "";
}

a.btn {
  display: block;
  padding: 5px;
  /*background-color: #ddd;*/
}