<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main-container">
<section>
<div class="container">
<div class="row card flex-row">
<div class="col-auto">
<form class="card-header d-none d-lg-block">
<input class="form-control form-control-lg" type="search" placeholder="Search chat" />
</form>
<div class="list-group list-group-chat list-group-flush">
<a href="#" class="list-group-item list-group-item-action active">
<div class="media">
<img alt="Image" src="https://source.unsplash.com/Nm70URdtf3c/336x336" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Daniel Cameron
<span class="badge badge-indicator badge-success"></span>
</h6>
<div>
<small class="text-muted">1 hour ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Let's keep those protoypes 100</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media">
<img alt="Image" src="assets/img/avatar-female-3.jpg" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Mercy Ketteridge</h6>
<div>
<small class="text-muted">1 hour ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">How should I go about this issue I'm facing</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media">
<img alt="Image" src="assets/img/avatar-male-3.jpg" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Sven Lansson</h6>
<div>
<small class="text-muted">2 hours ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Can you send through the logo files?</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media">
<img alt="Image" src="assets/img/avatar-male-2.jpg" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Bart Van Wissen</h6>
<div>
<small class="text-muted">7 hours ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">I'm collecting names for the annual event</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media">
<img alt="Image" src="assets/img/avatar-female-1.jpg" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Vanessa Sampson</h6>
<div>
<small class="text-muted">7 hours ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Are we all remembering to stay agile?</span>
</div>
</div>
</a>
</div>
</div>
<!--end of col-->
<div class="col">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="media align-items-center">
<img alt="Image" src="https://source.unsplash.com/Nm70URdtf3c/336x336" class="avatar avatar-sm" />
<div class="media-body">
<h6 class="mb-0 d-block">Daniel Cameron
<span class="badge badge-indicator badge-success"></span>
</h6>
<span class="text-muted text-small">last seen today at 2:15pm</span>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-no-arrow" type="button" id="Button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-sm" aria-labelledby="Button">
<a class="dropdown-item" href="#">Contact info</a>
<a class="dropdown-item" href="#">Mute</a>
<a class="dropdown-item" href="#">Clear messages</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Delete chat</a>
</div>
</div>
</div>
<!--end card header-->
<div class="card-body overflow-auto">
<div class="row justify-content-start">
<div class="col-auto">
<div class="card bg-secondary">
<div class="card-body p-2">
<p class="mb-0">
Agreed, their after-sales support is second-to-none.
</p>
<div>
<small class="opacity-60">1:08pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-0">
Same! The guys at Medium Rare are also top blokes
</p>
<div>
<i class="icon-check text-small"></i>
<small class="opacity-60">1:07pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card bg-secondary">
<div class="card-body p-2">
<p class="mb-0">
Yeah talk about speedy, it saves me so much time and effort 👌
</p>
<div>
<small class="opacity-60">1:06pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-0">
I know, right? We've been using Wingman for all our internal projects for a while now
</p>
<div>
<i class="icon-check text-small"></i>
<small class="opacity-60">1:05pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card bg-secondary">
<div class="card-body p-2">
<p class="mb-0">
Of course, I'm not a fool!
</p>
<div>
<small class="opacity-60">1:05pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-0">
Awesome, did you make it with Wingman?
</p>
<div>
<i class="icon-check text-small"></i>
<small class="opacity-60">1:05pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card bg-secondary">
<div class="card-body p-2">
<p class="mb-0">
Yes, all synced to the drive for you guys 👍
</p>
<div>
<small class="opacity-60">1:04pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-0">
Hey, what's up? Did you manage to get those prototypes together?
</p>
<div>
<i class="icon-check text-small"></i>
<small class="opacity-60">1:04pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col text-center">
<span class="badge badge-secondary">Conversation Started: Yesterday</span>
</div>
<!--end of col-->
</div>
</div>
<div class="card-footer bg-secondary">
<form class="d-flex align-items-center">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">
<i class="icon-attachment"></i>
</button>
</div>
<input class="form-control" type="text" placeholder="Type a message" name="message" />
</div>
<button class="btn btn-link pr-0">
<span class="h3">😀</span>
</button>
</form>
</div>
</div>
<!--end of col-->
</div>
<!--end of row-->
</div>
</section>
</div>
section {
display: block;
}
body {
margin: 0;
font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: left;
background-color: #f8f9fa;
}
h6 {
margin-top: 0;
margin-bottom: 1.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
small {
font-size: 80%;
}
a {
color: #4582EC;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:hover {
color: #1559cf;
text-decoration: none;
}
img {
vertical-align: middle;
border-style: none;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,button {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,input {
overflow: visible;
}
button {
text-transform: none;
}
button,html [type="button"] {
-webkit-appearance: button;
}
button:: -moz-focus-inner,[type="button"]:: -moz-focus-inner {
padding: 0;
border-style: none;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]:: -webkit-search-cancel-button,[type="search"]:: -webkit-search-decoration {
-webkit-appearance: none;
}
:: -webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
h6, .h3 {
margin-bottom: 1.5rem;
font-family: inherit;
font-weight: 400;
line-height: 1.1;
color: #343a40;
}
.h3 {
font-size: 1.75rem;
}
h6 {
font-size: 1rem;
}
small {
font-size: 0.75rem;
font-weight: 400;
}
.container {
width: 100%;
padding-right: 12px;
padding-left: 12px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -12px;
margin-left: -12px;
}
.col-11, .col, .col-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 12px;
padding-left: 12px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
max-width: 91.66667%;
}
.form-control {
display: block;
width: 100%;
padding: 0.3125rem 1rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.form-control {
-webkit-transition: none;
transition: none;
}
}
.form-control:: -ms-expand {
background-color: transparent;
border: 0;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #b9d0f8;
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-control:: -webkit-input-placeholder {
color: #adb5bd;
opacity: 1;
}
.form-control: -ms-input-placeholder {
color: #adb5bd;
opacity: 1;
}
.form-control:: -ms-input-placeholder {
color: #adb5bd;
opacity: 1;
}
.form-control: disabled {
background-color: #e9ecef;
opacity: 1;
}
.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-prepend > .btn {
padding: 0.6875rem 1.5rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.btn {
display: inline-block;
font-weight: 500;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.3125rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.btn {
-webkit-transition: none;
transition: none;
}
}
.btn:hover, .btn:focus {
text-decoration: none;
}
.btn:focus {
outline: 0;
-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn: disabled {
opacity: 0.65;
}
.btn: not(: disabled): not(.disabled) {
cursor: pointer;
}
.btn: not(: disabled): not(.disabled):active, .btn: not(: disabled): not(.disabled).active {
background-image: none;
}
.btn-primary: not(: disabled): not(.disabled):active, .btn-primary: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #1863e6;
border-color: #165edb;
}
.btn-primary: not(: disabled): not(.disabled):active:focus, .btn-primary: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.5);
box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.5);
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
}
.btn-secondary:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-secondary: disabled {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary: not(: disabled): not(.disabled):active, .btn-secondary: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
.btn-secondary: not(: disabled): not(.disabled):active:focus, .btn-secondary: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-success: not(: disabled): not(.disabled):active, .btn-success: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #018655;
border-color: #01794d;
}
.btn-success: not(: disabled): not(.disabled):active:focus, .btn-success: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(2, 184, 117, 0.5);
box-shadow: 0 0 0 0.2rem rgba(2, 184, 117, 0.5);
}
.btn-info: not(: disabled): not(.disabled):active, .btn-info: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #117a8b;
border-color: #10707f;
}
.btn-info: not(: disabled): not(.disabled):active:focus, .btn-info: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-warning: not(: disabled): not(.disabled):active, .btn-warning: not(: disabled): not(.disabled).active {
color: #212529;
background-color: #ec971f;
border-color: #ea9214;
}
.btn-warning: not(: disabled): not(.disabled):active:focus, .btn-warning: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5);
box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5);
}
.btn-danger: not(: disabled): not(.disabled):active, .btn-danger: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #c9302c;
border-color: #bf2e29;
}
.btn-danger: not(: disabled): not(.disabled):active:focus, .btn-danger: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.5);
box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.5);
}
.btn-light: not(: disabled): not(.disabled):active, .btn-light: not(: disabled): not(.disabled).active {
color: #212529;
background-color: #dae0e5;
border-color: #d3d9df;
}
.btn-light: not(: disabled): not(.disabled):active:focus, .btn-light: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-dark: not(: disabled): not(.disabled):active, .btn-dark: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #0a0c0d;
border-color: #050506;
}
.btn-dark: not(: disabled): not(.disabled):active:focus, .btn-dark: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5);
}
.btn-outline-primary: not(: disabled): not(.disabled):active, .btn-outline-primary: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #4582EC;
border-color: #4582EC;
}
.btn-outline-primary: not(: disabled): not(.disabled):active:focus, .btn-outline-primary: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.5);
box-shadow: 0 0 0 0.2rem rgba(69, 130, 236, 0.5);
}
.btn-outline-secondary {
color: #6c757d;
background-color: transparent;
background-image: none;
border-color: #6c757d;
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-outline-secondary:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-outline-secondary: disabled {
color: #6c757d;
background-color: transparent;
}
.btn-outline-secondary: not(: disabled): not(.disabled):active, .btn-outline-secondary: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-outline-secondary: not(: disabled): not(.disabled):active:focus, .btn-outline-secondary: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-outline-success: not(: disabled): not(.disabled):active, .btn-outline-success: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #02B875;
border-color: #02B875;
}
.btn-outline-success: not(: disabled): not(.disabled):active:focus, .btn-outline-success: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(2, 184, 117, 0.5);
box-shadow: 0 0 0 0.2rem rgba(2, 184, 117, 0.5);
}
.btn-outline-info: not(: disabled): not(.disabled):active, .btn-outline-info: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-outline-info: not(: disabled): not(.disabled):active:focus, .btn-outline-info: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-outline-warning: not(: disabled): not(.disabled):active, .btn-outline-warning: not(: disabled): not(.disabled).active {
color: #212529;
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-outline-warning: not(: disabled): not(.disabled):active:focus, .btn-outline-warning: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5);
box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.5);
}
.btn-outline-danger: not(: disabled): not(.disabled):active, .btn-outline-danger: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #d9534f;
border-color: #d9534f;
}
.btn-outline-danger: not(: disabled): not(.disabled):active:focus, .btn-outline-danger: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.5);
box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.5);
}
.btn-outline-light: not(: disabled): not(.disabled):active, .btn-outline-light: not(: disabled): not(.disabled).active {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-outline-light: not(: disabled): not(.disabled):active:focus, .btn-outline-light: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-dark: not(: disabled): not(.disabled):active, .btn-outline-dark: not(: disabled): not(.disabled).active {
color: #fff;
background-color: #212529;
border-color: #212529;
}
.btn-outline-dark: not(: disabled): not(.disabled):active:focus, .btn-outline-dark: not(: disabled): not(.disabled).active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5);
box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.5);
}
.btn-link {
font-weight: 400;
color: #4582EC;
background-color: transparent;
}
.btn-link:hover {
color: #1559cf;
text-decoration: none;
background-color: transparent;
border-color: transparent;
}
.btn-link:focus {
text-decoration: none;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link: disabled {
color: #adb5bd;
pointer-events: none;
}
.dropdown {
position: relative;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.2125em;
vertical-align: 0.2125em;
content: "";
border-top: 0.25em solid;
border-right: 0.25em solid transparent;
border-bottom: 0;
border-left: 0.25em solid transparent;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #495057;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #e9ecef;
border-radius: 0.25rem;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.375rem 1.5rem;
clear: both;
font-weight: 400;
color: #495057;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
color: #343a40;
text-decoration: none;
background-color: #f8f9fa;
}
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #4582EC;
}
.dropdown-item: disabled {
color: #6c757d;
background-color: transparent;
}
.input-group {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.input-group > .form-control {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
.input-group > .form-control:focus {
z-index: 3;
}
.input-group > .form-control: not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-prepend {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.input-group-prepend .btn {
position: relative;
z-index: 2;
}
.input-group-prepend {
margin-right: -1px;
}
.input-group > .input-group-prepend > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.navbar-toggler: not(: disabled): not(.disabled) {
cursor: pointer;
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #e9ecef;
border-radius: 0.25rem;
}
.card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.5rem;
}
.card-header {
padding: 0.75rem 1.5rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #e9ecef;
}
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header + .list-group .list-group-item:first-child {
border-top: 0;
}
.card-footer {
padding: 0.75rem 1.5rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid #e9ecef;
}
.card-footer: last-child {
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.page-link: not(: disabled): not(.disabled) {
cursor: pointer;
}
.badge {
display: inline-block;
padding: 0.25em 0.4em;
font-size: 75%;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.badge: empty {
display: none;
}
.badge-secondary {
color: #fff;
background-color: #6c757d;
}
.badge-success {
color: #fff;
background-color: #02B875;
}
.media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.media-body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.list-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
.list-group-item-action {
width: 100%;
color: #495057;
text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
color: #495057;
text-decoration: none;
background-color: #f8f9fa;
}
.list-group-item-action:active {
color: #212529;
background-color: #e9ecef;
}
.list-group-item {
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.list-group-item: last-child {
margin-bottom: 0;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.list-group-item:hover, .list-group-item:focus {
z-index: 1;
text-decoration: none;
}
.list-group-item: disabled {
color: #6c757d;
background-color: #fff;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #4582EC;
border-color: #007bff;
}
.list-group-flush .list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.list-group-flush: last-child .list-group-item: last-child {
border-bottom: 0;
}
.close: not(: disabled): not(.disabled) {
cursor: pointer;
}
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
}
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
}
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
}
@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
}
.bg-primary {
background-color: #4582EC;
}
.bg-secondary {
background-color: #6c757d;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
.d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 992px) {
.d-lg-block {
display: block;
}
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.justify-content-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.align-items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
}
.m-0 {
margin: 0;
}
.mb-0 {
margin-bottom: 0;
}
.ml-2 {
margin-left: 0.75rem;
}
.mb-4 {
margin-bottom: 2.25rem;
}
.p-0 {
padding: 0;
}
.pr-0 {
padding-right: 0;
}
.p-2 {
padding: 0.75rem;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-white {
color: #fff;
}
.text-muted {
color: #6c757d;
}
@media print {
*, *::before, *::after {
text-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
a: not(.btn) {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
p {
orphans: 3;
widows: 3;
}
@page {
size: a3;
}
body {
min-width: 992px;
}
.container {
min-width: 992px;
}
.badge {
border: 1px solid #000;
}
}
section {
position: relative;
}
.btn-link {
font-weight: 500;
}
.btn-outline-primary: not(:hover): not([aria-expanded="true"]): not([aria-pressed="true"]), .btn-outline-secondary: not(:hover): not([aria-expanded="true"]): not([aria-pressed="true"]) {
border-color: #ced4da;
}
.btn: disabled {
opacity: .35;
}
[class*='btn-outline']:active {
color: #fff;
}
.card {
margin-bottom: 1.5rem;
}
.card.row {
margin-left: 0;
margin-right: 0;
}
.card.row > [class*='col']: not(.card-body) {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.card.row > [class*='col']: not(.card-body):nth-child(2): last-child {
border-left: 1px solid #dee2e6;
}
}
@media (max-width: 575.98px) {
.card {
margin-bottom: 0.75rem;
}
}
.card-header {
padding: 1.125rem 1.5rem;
}
.card-header h6 {
margin: 0;
display: inline-block;
}
.card-header, .card-footer {
background: none;
}
.card-header + .list-group-flush > .list-group-item:first-child {
border-top: none;
}
.card-body.overflow-auto {
max-height: 500px;
max-width: 100%;
}
@media (max-width: 991.98px) {
.card.flex-row .col-auto {
max-width: 100%;
}
}
.bg-secondary {
background: #e9ecef;
}
.text-white {
color: #fff;
}
.list-links > li > a: not(:hover) {
opacity: .5;
}
section {
padding: 3rem 0;
}
@media (min-width: 576px) {
section {
padding: 4.5rem 0;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media (max-width: 991.98px) {
html {
font-size: 0.875rem;
}
}
.h3 {
line-height: 2.25rem;
}
h6 {
line-height: 1.5rem;
margin-bottom: 0.75rem;
}
.h3: last-child {
margin-bottom: 0;
}
.h3 {
display: block;
}
.text-small, h6 + span {
font-size: 0.875rem;
}
small {
line-height: 1.5;
display: inline-block;
}
.opacity-60 {
opacity: 0.6;
}
.overflow-auto {
overflow: auto;
}
.avatar {
border-radius: 50%;
width: 4.5rem;
height: 4.5rem;
}
.avatar.avatar-sm {
width: 3rem;
height: 3rem;
}
.media > .avatar:first-child {
margin-right: 1.5rem;
}
.media > .avatar:first-child.avatar-sm {
margin-right: 0.75rem;
}
.badge {
vertical-align: middle;
}
.badge-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
padding: 0;
position: relative;
bottom: 2px;
}
.badge-indicator: empty {
display: inline-block;
}
.dropdown-menu {
-webkit-box-shadow: 0px 0px 0px transparent;
box-shadow: 0px 0px 0px transparent;
-webkit-transition: -webkit-box-shadow .35s ease 5s;
transition: -webkit-box-shadow .35s ease 5s;
transition: box-shadow .35s ease 5s;
transition: box-shadow .35s ease 5s, -webkit-box-shadow .35s ease 5s;
}
.dropdown-item {
-webkit-transition: background-color .2s ease, color .2s ease;
transition: background-color .2s ease, color .2s ease;
}
.dropdown-menu-sm {
padding: .25rem 0;
}
.dropdown-menu-sm .dropdown-item {
padding: .25rem 1rem;
}
.dropdown-menu-sm .dropdown-divider {
margin: .5rem 0;
}
.dropdown-toggle-no-arrow:after {
display: none;
}
.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-prepend > .btn {
font-size: 1rem;
}
.form-control, .form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-prepend > .btn {
padding-left: 0.75rem;
}
.list-group-item {
border: 1px solid #e9ecef;
}
.list-group-item-action.active h6,.list-group-item-action.active .text-muted {
color: #fff;
}
@media (max-width: 991.98px) {
.list-group-chat {
border-radius: 0.25rem 0.25rem 0 0;
overflow-x: scroll;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
border-bottom: 1px solid #dee2e6;
}
}
