/* Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */
body {
  background-color: rgb(247, 247, 247);
  font-size: 10pt;
  margin: 150px 60px 0 30px;
}

#main-frame-blocked {
  margin: auto;
  max-width: 600px;
  min-width: 200px;
}

h1 {
  font-size: 1.8em;
  font-weight: normal;
  margin: 5px 0 25px 0;
}

.avatar-img {
  -webkit-user-select: none;
  border: 3px solid rgb(251, 251, 251);
  border-radius: 50%;
  content: -webkit-image-set(
      url(../../app/theme/default_100_percent/cros/logo_avatar_circle_blue_color.png) 1x,
      url(../../app/theme/default_200_percent/cros/logo_avatar_circle_blue_color.png) 2x);
  margin-bottom: 5px;
  margin-right: 15px;
  margin-top: 5px;
  max-width: 45px;
  position: relative;
}

#feedback-link {
  font-size: 80%;
  margin-top: 10px;
}

#request-access-button {
  background-color: rgb(66, 133, 244);
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  min-width: 88px;
  padding: 10px 15px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 200ms;
}

#request-access-button:hover {
  background-color: rgb(30, 136, 229);
}

#request-access-button:active {
  background-color: rgb(25,118,210);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

#details-button-container {
  color: rgb(97,97,97);
  cursor: pointer;
  display: inline;
  font-size: 12px;
  text-decoration: underline;
}

#button-container {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

#details {
  color: rgb(97,97,97);
  font-size: 14px;
}

#details-header {
  font-weight: bold;
}

.custodian-information {
  align-items: center;
  display: flex;
  font-size: 12px;
}

.custodian-name {
  color: rgb(97,97,97);
  padding: 1px 0;
}

.custodian-email {
  color: rgb(183, 183, 183);
  padding: 1px 0;
}

@media (max-width: 600px) {
  #button-container {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    order: 2;
    text-transform: uppercase;
  }

  #details-button-container {
    font-weight: bold;
    margin: auto;
    order: 2;
  }

  #request-access-button {
    margin-bottom: 30px;
    order: 1;
    text-align: center
  }

  .button {
    width: 100%;
  }

  #details {
    margin: auto;
    order: 1;
  }

  .hidden-on-mobile {
    display: none;
  }

  #main-frame-blocked {
    display: flex;
    flex-flow: column;
  }
}