/*  
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
*/

@media only screen and (max-width: 767px) {

    .h1,
    h1 {
        font-size: 1.62rem
    }

    .h2,
    h2 {
        font-size: 1.41rem
    }

    .h3,
    h3 {
        font-size: 1.215rem
    }

    .h4,
    h4 {
        font-size: 1rem
    }

    .h5,
    h5 {
        font-size: .81rem
    }

    .h6,
    h6 {
        font-size: 0.61rem
    }

    .txt-label-def {
        font-size: 0.75rem;
    }

    .txt-input-def {
        font-size: .81rem
    }

    .txt-glyph-disp {
        font-size: 1rem
    }
}

@media only screen and (min-width: 768px) {

    .h1,
    h1 {
        font-size: 2rem
    }

    .h2,
    h2 {
        font-size: 1.75rem
    }

    .h3,
    h3 {
        font-size: 1.5rem
    }

    .h4,
    h4 {
        font-size: 1.25rem
    }

    .h5,
    h5 {
        font-size: 1rem
    }

    .h6,
    h6 {
        font-size: 0.75rem
    }

    .txt-label-def {
        font-size: 1rem
    }

    .txt-input-def {
        font-size: 1rem
    }

    .txt-glyph-disp {
        font-size: 1.5rem
    }
}

@font-face {
    font-family: 'NMS Glyphs';
    src: url('/bin/NMS-Glyphs-Mono.ttf') format('truetype');
}

.glyph {
    font-family: "NMS Glyphs" !important;
    font-weight: bold;
}

.txt-glyph-disp {
    font-family: "NMS Glyphs" !important;
    font-weight: bold;
}

.monospace {
    font-family: "Courier New" !important;
    font-weight: bold;
}

body {
    font-family: "Arial";
    background-color: black;
}

.waiting {
    cursor: progress !important;
}

.row,
[class^=col] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.txt-right {
    text-align:right;
}

.nopadding {
    padding: 0px !important;
    margin: 0px !important;
}

.hidden {
    display: none;
}

.nopadding-left {
    padding-left: 0px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-black {
    border-color: black;
}

.border-white {
    border-color: white;
}

.border-gold {
    border-color: gold;
}

.border-def {
    border-color: gold;
}

.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
}

.nav-text {
    padding-top: 8px;
    color: blue;
    background-color: #f0fff0;
}

.clr-def {
    color: black;
}

.bkg-def {
    background-color: black;
}

.bdr-black {
    border-color: black;
}

.txt-def {
    color: gold;
    background-color: black;
}

.txt-black {
    color: black;
    background-color: white;
}

.txt-blue {
    color: blue;
}

.txt-label-def {
    color: blue;
}

.txt-glyph-disp,
.txt-input-def {
    border-radius: 4px;
}

.btn-def {
    background-color: black;
    border-color: gold;
    color: gold;
}

.btn-def.disabled,
.btn-def:disabled {
    border: 0px;
}

.btn-def.focus,
.btn-def:focus,
.btn-def:not(:disabled):not(.disabled).active:focus,
.btn-def:not(:disabled):not(.disabled):active:focus,
.show>.btn-def.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem gold;
    color: gold;
}

.btn-def:not(:disabled):not(.disabled).hover,
.btn-def:not(:disabled):not(.disabled):hover {
    box-shadow: 0 0 0 .2rem gold;
    color: gold;
    opacity: 0.75;
}

.clr-dark-green {
    color: #008000;
}

.clr-cream {
    color: rgb(238, 227, 183);
}

.clr-red {
    color: rgb(255, 1, 1);
}

.clr-light-green {
    color: #e8ffe8;
}

.bkg-trans {
    background-color: transparent;
}

.bkg-trans-1 {
    background-color: rgba(255, 255, 255, .1);
}

.bkg-trans-2 {
    background-color: rgba(255, 255, 255, .2);
}

.bkg-white {
    background-color: white;
}

.bkg-black {
    background-color: black;
}

.bkg-green {
    background-color: green;
}

.bkg-light-green {
    background-color: #f0fff0;
}

.bkg-dark-gray {
    background-color: #c0c0c0;
}

.bkg-light-gray {
    background-color: #d0d0d0;
}

.bkg-vlight-gray {
    background-color: #e0e0e0;
}

.bkg-white {
    background-color: #ffffff;
}

.bkg-yellow {
    background-color: #ffff00;
}

.clr-white {
    color: #ffffff;
}

.clr-blue {
    color: blue;
}

.card-title {
    color: #008000;
}

.badge-blue {
    color: #ffffff !important;
    background-color: #0008ff !important;
    border-color: gold !important;
}

.badge-green {
    color: #ffffff !important;
    background-color: #00ff00 !important;
    border-color: gold !important;
}

.badge-red {
    color: #ffffff !important;
    background-color: #ff0000 !important;
    border-color: gold !important;
}

.badge-orange {
    color: #ffffff !important;
    background-color: #cb7a00 !important;
    border-color: gold !important;
}

.badge-purple {
    color: #ffffff !important;
    background-color: #70015b !important;
    border-color: gold !important;
}
.badge-black {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-color: gold !important;
}

.btn-green {
    color: #008000;
    background-color: #88f188;
    border-color: gold;
    border: 3px;
}

.btn-green.disabled,
.btn-green:disabled {
    color: #75b675;
    border: 0px;
}

.btn-green.focus,
.btn-green:focus,
.btn-green:not(:disabled):not(.disabled).active:focus,
.btn-green:not(:disabled):not(.disabled):active:focus,
.show>.btn-green.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 128, 0, .1);
    animation: pulse .25s 1;
}

.button {
    cursor: pointer;
}

.pointer {
    cursor: pointer !important;
}

.hanging-indent {
    padding-left: 40px;
    text-indent: -40px;
}

.pr-5 {
    padding-right: 5px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-5 {
    padding-left: 5px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

.no-border {
    border: 0px;
}

.border-top-gold {
    border-top: 1px solid;
    border-color: gold;
}

.scrollable-menu {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.dropdown-menu {
    right: auto !important;
    left: auto !important;
}

.colorpicker.colorpicker-2x {
    width: 280px;
}

.colorpicker-2x .colorpicker-saturation {
    width: 200px;
    height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
    width: 20px;
    height: 200px;
}

.colorpicker-2x .colorpicker-alpha,
.colorpicker-2x .colorpicker-preview {
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.colorpicker-2x .colorpicker-preview,
.colorpicker-2x .colorpicker-preview div {
    height: 20px;
    font-size: 16px;
    line-height: 160%;
}

.colorpicker-saturation .colorpicker-guide {
    height: 10px;
    width: 10px;
    border-radius: 10px;
    margin: -5px 0 0 -5px;
}