/*
Cards

Card styles from trimble css

Markup:
<div class="row tile profile">
    <div class="col s12 m3 l2 xs12">
            <div class="profile-card-container">
                <div class="avatar-wrapper">
                    <div class="card-avatar">
                        <img src="../src/images/8.png" alt="">
                    </div>
                </div>
                <div><h4>Raman Babu</h4></div>
                <div class="name"><p>Raman</p></div>
                <div><p class="link">raman_babu@trimble.com</p></div>
                <div><p>Trimble</p></div>
                <div class="profile-card-footer">
                        <div class="profile-card-role">
                            <p>Admin</p>
                        </div>
                        <div class="profile-card-edit">
                            <ul>
                                <li class="dropdown-pane-container">
                                    <button class="clear dropdownpane-link"><i class="i32 icon_blue_overflow"></i></button>
                                    <div class="dropdown-pane is-open">
                                        <ul class="dropdown-list">
                                            <li>FORCE LOGOFF</li>
                                            <li>Remove</li>
                                            <li>Suspend</li>
                                        </ul>                                        
                                    </div>
                                </li>
                            </ul>       
                        </div>
                </div>
            </div>
    </div>
</div>

Styleguide UI Elements.cards
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 300;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

h4, p {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

h5 {
  font-size: 0.75rem;
}

h4 {
  font-weight: 600;
}

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'); */
/* @mixin border-radius{
  border-radius: 2px;
} */
/* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); */
.end {
  display: flex;
  justify-content: flex-end;
}

.align-center {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.card {
  background-color: #f9f9fb;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 1px 1px 5px #b5b4c5;
}

.card .card-title {
  padding: 1rem;
  color: #6A6976;
}

.card .card-section {
  padding: 0 1rem 1rem;
}

.card .avatar {
  margin: 1rem auto 2rem auto;
}