/**
  * Copyright VOIP Awesome Inc.
  * VOIP Awesome Chrome Extension
  * 
  **/

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #000637;
  --secondary: #bbbbf2;
  --success: #5ed6b3;
  --info: #1998ff;
  --warning: #ffad00;
  --danger: #e35241;
  --light: #fc7341;
  --dark: #221e1e;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


body {
    color: #fefefe;
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 10pt;
    background-color: #333;
}

a { text-decoration: none; color: #fefefe; white-space: nowrap; word-wrap: normal; }
a:hover { text-decoration: none; color: #2e84de; }
a:visited { text-decoration: none; color: #fefefe; }
a:active { text-decoration: none; color: #f63637; }

.text-link { text-decoration: none; color: #fefefe; white-space: nowrap; word-wrap: normal; display: inline-block; }
.text-link:hover { text-decoration: none; color: #2e84de; }
.text-link:visited { text-decoration: none; color: #fefefe; }
.text-link:active { text-decoration: none; color: #f63637; }

.fnt10  { font-size: 10px; }
.fnt12  { font-size: 12px; }
.fnt14  { font-size: 14px; }
.fnt16  { font-size: 16px; }
.fnt18  { font-size: 18px; }
.fnt24  { font-size: 24px; }
.fnt36  { font-size: 36px; }
.fnt64  { font-size: 64px; }
.fnt96  { font-size: 96px; }
.fnt980 { font-size: 980px;}
.m0     { margin: 0px;  }
.m10    { margin: 10px; }
.m20    { margin: 20px; }
.m40    { margin: 40px; }
.mt5    { margin-top: 5px; }
.mt10   { margin-top: 10px; }
.mt20   { margin-top: 20px; }
.mt40   { margin-top: 40px; }
.mb5    { margin-bottom: 5px; }
.mb10   { margin-bottom: 10px; }
.mb20   { margin-bottom: 20px; }
.mb40   { margin-bottom: 40px; }
.ml5    { margin-left: 5px; }
.ml10   { margin-left: 10px; }
.ml20   { margin-left: 20px; }
.ml40   { margin-left: 40px; }
.mr5    { margin-right: 5px; }
.mr10   { margin-right: 10px; }
.mr20   { margin-right: 20px; }
.mr40   { margin-right: 40px; }
.none   { display: none !important; }
.p0     { padding: 0px;  }
.p10    { padding: 10px; }
.p20    { padding: 20px; }
.p40    { padding: 40px; }
.pt5    { padding-top: 5px; }
.pt10   { padding-top: 10px; }
.pt20   { padding-top: 20px; }
.pt40   { padding-top: 40px; }
.pb5    { padding-bottom: 5px; }
.pb10   { padding-bottom: 10px; }
.pb20   { padding-bottom: 20px; }
.pb40   { padding-bottom: 40px; }
.pl5    { padding-left: 5px; }
.pl10   { padding-left: 10px; }
.pl20   { padding-left: 20px; }
.pl40   { padding-left: 40px; }
.pr5    { padding-right: 5px; }
.pr10   { padding-right: 10px; }
.pr20   { padding-right: 20px; }
.pr40   { padding-right: 40px; }
.h25    { height: 25%;  }
.h50    { height: 50%;  }
.h75    { height: 75%;  }
.h100   { height: 100%; }
.h15px  { height: 15px; }
.w25    { width: 25%;  }
.w50    { width: 50%;  }
.w75    { width: 75%;  }
.w100   { width: 100%; }
.w15px  { width: 15px; }

.scroll {
    overflow: auto !important;
}
.scrollx { 
    overflow-x: auto !important;
    overflow-y: hiden !important;
}
.scrolly { 
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333333;
}
*::-webkit-scrollbar {
    width: 8px;
    background-color: #111111;
}
*::-webkit-scrollbar-thumb {
    background-color: #0e0e0e;
    border-radius: 4px;
}


#status, .status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 400px;
}
.bg-dark {
    background-color: #222426;
}
.font-dark {
    color: #222426;
}
.bg-green {
    background-color: #00bc7c;
}
.font-green {
    color: #00bc7c;
}
.bg-red {
    background-color: #ff5b57;
}
.font-red { 
    color: #ff5b57;
}
.text-muted { color: #a3a3a3; }
a > .text-muted:hover { text-decoration: none; color: #2e84de; }
.text-link > .text-muted:hover { text-decoration: none; color: #2e84de; }

.inline { display: inline-block; }
.red { color: #e35241; }
.text-danger { color: #e35241; }
.orange { color: #ffad00; }
.text-warning { color: #ffad00; }
.gray { color: #6c757d; }
.text-disabled { color: #6c757d; }
.green { color: #5ed6b3; }
.text-success { color: #5ed6b3; }
.menu {
    position: relative;
    font-size: 11pt;
    font-weight: bold;
    width: 100%;
    height: 30px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
.menu-list {
    z-index: 100;
    width: 170px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    padding: 0px;
}
.menu-list-item {
    margin: 5px 15px 5px 15px;
}
.menu-page-info {
    z-index: 99;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 0px;
    padding: 0px;
}
.menu-page-info-item {
    text-align: center;
    margin: 5px 15px 5px 15px;
}
.menu-page-info-text {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}
.list-group {
    color: #333;
}
.footer {
    margin-bottom: -7px;
    font-size: 10px;
    width: 100%;
    height: 30px;
    padding: 0px;
    padding-top: 7px;
    padding-left: 15px;
    background-color: #3e3e3e;
    overflow-x: hidden;
    overflow-y: hidden;
}
.left { 
    display: inline-block;
    float: left;
}
.right { 
    display: inline-block;
    float: right;
}
.clear::after {
    content: "";
    clear: both;
}
.section {
    position:relative;
    padding: 0px;
    min-height: calc(100vh - 30px);
}
.body-with-footer > .section {
    min-height: calc(100vh - 60px) !important;
}
.section-notice {
    margin: 0px !important;
    padding: 0px !important;
    max-width: calc(100vw - 20px) !important;
    min-height: calc(100vh - 60px) !important;
}
.section-content {
    margin: 0px;
    padding: 20px;
}
.fh {
    height: calc(100%);
}
.fw {
    width: calc(100%) !important;
}
.scroll-div-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 999;
    opacity: 1;
    -webkit-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
    text-align: center;
    vertical-align: center;
    font-size: 24px;
}
.slimScrollBar,
.slimScrollRail {
    /* legacy slimScroll classes no longer used; kept empty for safety */
}


/*
 *
 *
 * Media screen size overrides (has to be after the standard declarations!)
 *
 *
 */

@media only screen and (max-width:550px) {
    .menu-page-info-text { display: none; }
}





/*
 *
 *
 * Light color overrides (has to be at the end!)
 *
 *
 */

@media (prefers-color-scheme: light) {
    body { color: #333; background-color: #fefefe; }
    .text-muted { color: #c1c1c1; font-weight: normal !important; }
    a { text-decoration: none; color: #333; white-space: nowrap; word-wrap: normal; }
    a:hover { text-decoration: none; color: #2e84de; }
    a:visited { text-decoration: none; color: #333; }
    a:active { text-decoration: none; color: #f63637; }
    a > .text-muted:hover { text-decoration: none; color: #2e84de; }

    .text-link { text-decoration: none; color: #333; white-space: nowrap; word-wrap: normal; }
    .text-link:hover { text-decoration: none; color: #2e84de; }
    .text-link:visited { text-decoration: none; color: #333; }
    .text-link:active { text-decoration: none; color: #f63637; }
    .text-link > .text-muted:hover { text-decoration: none; color: #2e84de; }

    *::-webkit-scrollbar-track { background-color: #fefefe; }
    *::-webkit-scrollbar { background-color: #c1c1c1; }
    *::-webkit-scrollbar-thumb { background-color: #c1c1c1; }

    .footer { background-color: #f5f5f5; }
    .list-group { color: #333; }
}
