styles.css

/* You can add global styles to this file, and also import other style files */
@import 'emoji.css';
@import 'material-design-icons/iconfont/material-icons.css';

body, .image-background {
    /* Set font family */
    font-family: 'Roboto', sans-serif;
    background-color: white;
}

/* Disable user select for non-input */

* {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    scrollbar-color: var(--primary-color) white;
    scrollbar-width: thin;  /* also change in index.html */
    -ms-overflow-style: none;
}

mat-form-field, mat-form-field *, .markdown *, input {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;  /* also change in index.html */
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--warn-color);;
}

/* Flyout styles */

.flyout {
    -webkit-overflow-scrolling: auto;
    bottom: auto !important;
    z-index: 102;
    width: 20vw;
    min-width: 240px;
    height: 100vh;
}

.flyout-backdrop {
    top: -70px !important;
    z-index: 101;
    touch-action: none;
}


/* Sub card styles */

.sub-card {
    max-width: 500px;
    cursor: pointer;
    box-shadow: none !important;
    margin: 0;
    outline:none;
    border-radius: 0 !important;
}

.sub-card:hover {
    background-color: #fafafa;
}

.theme-header {
    width: 100%;
    background-color: var(--primary-color);
    margin-bottom: 10px;
}

.primary-background-color {
    background-color: var(--primary-color);
    color: white;
}

.full-width {
    width: 100%;
}

.img-circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

/* Markdown */
.markdown a {
    color: var(--primary-color);
    text-decoration: none;
}

.markdown a:hover {
    color: blue;
}

.markdown table {
    border: 1px solid #ddd;
    margin: 10px 0;
    border-collapse: collapse;
}

.markdown th, .markdown td {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px
}

.markdown th {
    padding: 12px 8px;
    text-align: left;
    background-color: var(--primary-color);
    color: white;
}

.markdown tr:nth-child(even) {
    background-color: #f2f2f2
}

.markdown tr:hover {background-color: #ddd;}

.markdown img {
    max-width: 100%;
    height: auto;
}

.object-cover {
    object-fit: cover;
}

.float-fixed-right-bottom {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

.overflow-ellipsis {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clickable{
    cursor:pointer;
}

.rl-header {
    /* Responsive light header */
    font-weight: 200;
    font-size: 2.5em;
}

.rl-header.sm {font-size: 2em;}
.rl-header.xs { font-size: 1.4em; }

/* For Create-Post & Close-popup Dialogbox  */
.custom-container .mat-dialog-container {
    border-radius: 20px !important;
 }

@media (max-width: 768px) {
    .rl-header { font-size: 1.5em; }
    .rl-header.sm { font-size: 1.3em; }
    .rl-header.xs { font-size: 1.1em; }
}

@media (min-width: 768px){
    .desktop-10px {
        height: 10px;
        width: 100%;
    }
}