coronaindia
Version:
COVID19 India Tracker, predictive analytics and research. Built by engineers, data scientists, AI and medical professionals.
448 lines (362 loc) • 8.46 kB
CSS
#frame .content {
float: right;
overflow: hidden;
position: relative;
height: 685px;
}
@media screen and (max-width: 735px) {
#frame .content {
width: calc(100% - 58px);
min-width: 300px ;
height: 100%
}
}
@media screen and (min-width: 900px) {
#frame .content {
width: 100%;
height: 100%
}
}
#frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
#frame .content .contact-profile img {
width: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
#frame .content .contact-profile p {
text-align: center;
font-size: 25px;
font-weight: bold;
}
#frame .content .contact-profile .social-media {
float: right;
}
#frame .content .contact-profile .social-media i {
margin-left: 14px;
cursor: pointer;
}
#frame .content .contact-profile .social-media i:nth-last-child(1) {
margin-right: 20px;
}
#frame .content .contact-profile .social-media i:hover {
color: #435f7a;
}
#frame .content .messages {
height: 100%;
max-height: calc(100% - 63px);
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 735px) {
#frame .content .messages {
max-height: calc(100% - 105px);
}
}
#frame .content .messages::-webkit-scrollbar {
width: 8px;
background: transparent;
}
#frame .content .messages::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
#frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 15px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
}
#frame .content .messages ul li:nth-last-child(1) {
margin-bottom: 20px;
}
#frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
#frame .content .messages ul li.sent p {
background: #dae0e5;
color: #f5f5f5;
}
#frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
#frame .content .messages ul li.replies p {
background: #dae0e5;
float: right;
}
#frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
#frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
border-radius: 20px;
max-width: 205px;
line-height: 130%;
color: darkblue;
}
@media screen and (min-width: 735px) {
#frame .content .messages ul li p {
max-width: 300px;
}
}
#frame .content .message-input {
position: absolute;
bottom: 0;
width: 100%;
z-index: 99;
}
#frame .content .message-input .wrap {
position: relative;
}
#frame .content .message-input .wrap input {
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
float: left;
border: none;
width: calc(100% - 90px);
padding: 11px 32px 10px 8px;
font-size: 0.8em;
color: #32465a;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap input {
padding: 15px 32px 16px 8px;
}
}
#frame .content .message-input .wrap input:focus {
outline: none;
}
#frame .content .message-input .wrap .attachment {
position: absolute;
right: 60px;
z-index: 4;
margin-top: 10px;
font-size: 1.1em;
color: #435f7a;
opacity: .5;
cursor: pointer;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap .attachment {
margin-top: 17px;
right: 65px;
}
}
#frame .content .message-input .wrap .attachment:hover {
opacity: 1;
}
#frame .content .message-input .wrap button {
float: right;
border: none;
width: 50px;
padding: 12px 0;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap button {
padding: 16px 0;
}
}
#frame .content .message-input .wrap button:hover {
background: #435f7a;
}
#frame .content .message-input .wrap button:focus {
outline: none;
}
#newsscroll::-webkit-scrollbar {
background: transparent;
width: 0.2em ;
outline: 1px solid slategrey ;
border-radius: 10px ;
scroll-behavior: smooth ;
}
#newsscroll::-webkit-scrollbar-thumb {
background-color: black;
corner
}
#pagescroll::-webkit-scrollbar {
background: transparent;
width: 0.5em ;
outline: 1px solid grey ;
border-radius: 10px ;
scroll-behavior: smooth ;
}
#pagescroll::-webkit-scrollbar-thumb {
background-color: grey;
corner
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
/* The container */
.container1 {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container1 input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container1:hover input~.checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container1 input:checked~.checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container1 input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container1 .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.fab {
padding: 8px;
font-size: 15px;
width: 30px;
border-radius: 100%;
text-align: center;
text-decoration: none;
}
.fab:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-github-square {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #eb4924;
color: white;
}
.fa-whatsapp {
background: #128C7E;
color: white;
}
[class*="col-"] {
padding-left: 0;
}
.card-header{
background-color:#edf4fb;
}
.small-box{
border-radius:10px;
}
.card{
border-radius:5px;
border:1px solid gray;
}
.navbar{
/* border-bottom: 1px solid black; */
}
.control-sidebar{
width:400px ;
overflow-y:auto ;
}
.amcharts-amexport-item {
border: 2px solid #777;
color:white;
background-color:gray;
}
.amcharts-amexport-top .amcharts-amexport-item > .amcharts-amexport-menu {
top: -3px;
right: 2px;
}
.new-text{
border-radius: 18%;
font-size: 12px;
}