[class^='ion-'] {
    font-size: 1.2em;
}

a {
    cursor: pointer;
}

.annotation-text {
    color: yellowgreen;
    font-size: larger;
    font-weight: bold;
}

.bg-indigo {
    background-color: indigo;
}

body {
    font-size: 16px;
    color: lightcyan;
    background: #000000;
}

main {
    margin-left: 10px;
}

button.sp-2 {
    margin: 2px;
}

.btn {
    font-weight: bold;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 12px;
    text-align: center;
}

.btn-lg {
    font-size: 18px;
}

.c-danger {
    color: orange;
}

.c-blue {
    color: deepskyblue;
}

.c-dim {
    color: dimgray;
}

.c-lime {
    color: limegreen;
}

.c-orange {
    color: darkorange;
}

.c-pink {
    color: pink;
}

.c-purple {
    color: rebeccapurple;
}

.c-yellow {
    color: yellow;
}

.cro-cb {
    background: #000033;
}

.cro-ch {
    background:#000033;
}

.cro-ch-label {
    color: #85ccdb;
    font-size: small
}

.cro-ch-text {
    color: darkgray;
    font-size: medium;
    font-weight: bold;
}

.cro-thumb {
    width: 300px;
}

div.st-left-top {
    position: absolute;
    left: 10px;
}

div.st-right-top {
    position: absolute;
    right: 10px;
}


fieldset {
    margin-top: 100px;
}

.form-control {
    border-radius: 0;
}

/* Tricks to hide the browser's File Upload button and show the Bootstrap button instead. */
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.form-control-label {
    background-color: #2C3D9B;
    color: lightgray;
    font-size: 10pt;
}

.footer-main {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #3B5998;
}

.footer-copyright {
    font-size: x-small;
    color: #3B5998;
}

.has-feedback .form-control-feedback {
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    line-height: 46px;
    color: #555;
}

.has-feedback .form-control {
    padding-left: 42.5px;
}


h1 {
    text-align: center;
    font-size: 30px;
}

.icon-solid-red {
    color: wheat;
    background-color: red;
}

.icon-solid-red-big {
    font-size: large;
    color: red;
}

i.big {
    font-size: x-large;
}

i.red {
    color: red;
}

i.yellow {
    color: yellow;
}

.yellow {
    color: yellow;
}

input.big-checkbox {
    height: 25px;
    width: 25px;
    background: #555;
    border-radius: 5px;
}

input.sm-checkbox {
    height:20px;
    width: 20px;
}

input[type=checkbox].big {
    height: 25px;
    width: 25px;
    background: #555;
    border-radius: 5px;
}

.input-np {
    color: white;
    background-color: #2C3D9B;
}

label.big {
    font-size: large;
}

input:hover, input:focus {
    outline: 0;
    transition: all .5s linear;
    box-shadow: inset 0 0 10px #ccc;
}

input[type="text"] {
    background-color: #2C3D9B ;
    color: #ffffff;
}

input[type="text"]::placeholder  {
    color: #8fd7f3;
}

input[type="email"] {
    background-color: #2C3D9B ;
    color: gray;
}

input[type="email"]::placeholder  {
    color: #8fd7f3;
}

input[type="password"] {
    background-color: #2C3D9B ;
    color: #ffffff;
}

input[type="password"]::placeholder  {
    color: #8fd7f3;
}

input[type="search"] {
    background-color: #2C3D9B ;
    color: #ffffff;
}

input[type="search"]::placeholder  {
    color: #8fd7f3;
}

.list-hdb {
    background: black;
    color: lightcyan;
}

.list-hd {
    background: #00001a;
    color: gray;
}

.list-back {
    background-color:  #00004d;
}

.list-back:hover {
    background-color: #330000;
}

.list-back2 {
    background-color: #000033;
}

.list-back2:hover {
    background-color:#330000;
}


legend {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.log-ok {
    font-family: Consolas, monospace, sans-serif;
}

.log-error {
    font-family: Consolas, monospace, sans-serif;
    font-weight: bold;
    color: coral;
}

.log-match {
    font-family: Consolas, monospace, sans-serif;
    font-weight: bold;
    color: limegreen;
}

.log-warn {
    font-family: Consolas, monospace, sans-serif;
    font-weight: bold;
    color: yellow;
}

meter {
    /* Reset the default appearance */
    -moz-appearance: none;
    appearance: none;

    margin: 0 auto 1em;
    width: 100%;
    height: .5em;

    /* Applicable only to Firefox */
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter::-webkit-meter-bar {
    background: none;
    background-color: rgba(0,0,0,0.1);
}

meter[value="0"]::-webkit-meter-optimum-value,
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter::-webkit-meter-even-less-good-value { background: red; }
meter::-webkit-meter-suboptimum-value { background: orange; }
meter::-webkit-meter-optimum-value { background: green; }

meter::-webkit-meter-optimum-value {
    transition: width .4s ease-out;
}

.neb-blue-fg {
    color: #26A9E0;
}

.orion-32 {
    width: 32px;
    height: 32px;
    transform: translateX(0) translateY(-6px);
}

.pad20 {
    padding: 20px;
}

.provider {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    outline: none;
}
.facebook { background: #3B5998; }
.google { background: #D14836; }
.twitter { background: #00ACED; }
.yahoo { background: #731A8B; }
.xing { background: #006567; }
.vk { background: #567ca4; }

.social-providers,
.sign-in-now,
.already-member,
.not-a-member {
    text-align: center;
    margin-top: 20px;
}

.pat-h {
    background-color: black;
    color: darkcyan;
}

.pat-big-h {
    color: darkgray;
}

.row-body {
    margin-left: 40px;
}

.starter-template {
    padding: 40px 15px;
}

.select-np {
    color: white;
    background-color: #2C3D9B;
    font-size: 10pt;
}
.select-opt-np {
    color: white;
    background-color: #2C3D9B;
}

.status {
    font-size: larger;
    color: yellow;
    padding:7px;
    text-align: center;
}

.status-error {
    font-size: larger;
    color: indianred;
    padding:7px;
    text-align: center;
}

.sticky-nav {
    position: fixed;
    background: black;
    top: 0;
    width: 100%;
    z-index: 20;
}

.study-head {
    background: #202020;
}

.t-div {
    background-color: #000033;
    padding: 2px;
}

.t-card {
    /*height: 427px;*/
    background-color: #000033;
    color: darkgray;
    width: 18rem;
}

.t-card-wide {
    /*height: 427px;*/
    background-color: #000033;
    color: darkgray;
    width: 32rem;
}

.tc-img {
    /*height: 256px;*/
    /*width: auto;*/
    background-color: black;
}

.tc-img-icon {
    height: 322px;
}

.tc-img-pdf {
    height: 284px;
}

.t-h {
    font-size: medium;
    background-color: black;
    color: white;
}

.t-1 {
    background-color: lightblue;
    color: black;
}

.t-2 {
    background-color: lightgray;
    color: black;
}

.thumb-col {
    background-color: black;
    margin: auto;
    display: block;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.Tooltip-wrap {
    display: inline-block;
    margin-right: 5px;
    position: relative;
}

.Tooltip-wrap:hover .Tooltip {
    opacity: 1;
    transform: translateX(-70%) translateY(-60px);
    transition: all .1s ease .5s;
    visibility: visible;
}

.Tooltip {
    background: rgba(0, 0, 0, .8);
    border-radius: 2px;
    bottom: -30px;
    color: white;
    font-size: 18px;
    left: 50%;
    opacity: 0;
    padding: 5px 10px;
    position: absolute;
    transform: translateX(-50%) translateY(0);
    transition: all .2s ease;
    user-select: none;
    visibility: hidden;
    white-space: nowrap;
}

.user-edit-label {
    color: white;
}

.user {
    margin-top: 50px;
}

.user .data {
    margin-top: 10px;
}

.viewer-b {
    background-color: darkslategray;
}

.viewer-h {
    color: lightslategray;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}