/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
html {
    background-color: #808080;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 300;
}

.form-control {
    font-weight: 300;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, th {
    font-weight: 400;
}

.btn-mt1 {
    margin-top: -1px;
}

.btn-width50 {
    width:150px;
    margin-bottom: 1px;
    margin-left:4px;
}

.footer {
    width: 100%;
    background-color: #808080;
    text-align: center;
    margin-top: 400px;
    box-shadow: 0px -0.25rem .75rem rgba(0,0,0,0.1);
}

.toolbar {
    background-color: rgba(0,0,0,.03);
    margin-bottom: 1rem !important;
}

.toolbar-title {
    font-size: 1.6rem;
    font-weight: 400;
    padding-left: 1rem !important;
    margin-right: auto !important;
}

.card {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

#logo {
    height: 40px;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.btn-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
}

.form-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    border-radius: 6px;
}


table {
    border-collapse: separate;
    border-radius: 6px;
    -moz-border-radius: 6px;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
    border: 1px solid rgba(0,0,0,.125);
}

th {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

th {
    background-color: rgba(0,0,0,0.05) !important;
    border-bottom: none !important;
}

    td:first-child, th:first-child {
        border-left: none;
    }

.ok {
    background-color: green;
    color: white;
}

.error {
    background-color: red;
    color: white;
}



#queueView {
    overflow-y: auto;
    min-height: 300px;
}

.tab {
    float: left;
    margin: 2px 2px 2px 0px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
    text-align: center;
    font-size: 13px;
    width: 300px !important;
    border-radius: 4px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.25);
}

    .tab .header {
        font-size: 14px;
    }

    .tab .body {
        font-size: 50px;
    }


.counters {
    cursor: pointer;
    background-color: white;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.31);
    -moz-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.31);
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.21);
    border: solid 1px rgba(0,0,0,0.21);
    margin: 10px;
    border-top: 4px solid #0099ff;
    border-radius: 4px;
    height: 70px;
    font-size: 18px;
    color: gray !important;
    width: 130px;
    margin-bottom: 4px;
    border-top: 4px solid lightgray;
}

    .counters.active {
        border-top: 4px solid green;
    }

        .counters.active span:last-child {
            color: green;
            animation: fade 3000ms infinite;
            -webkit-animation: fade 3000ms infinite;
        }

    .counters.success {
        border-top: 4px solid green;
    }

        .counters.success span:last-child {
            color: green;
        }

    .counters.error {
        border-top: 4px solid red;
    }

        .counters.error span:last-child {
            color: red;
            animation: fade 2000ms infinite;
            -webkit-animation: fade 2000ms infinite;
        }

    .counters.warning {
        border-top: 4px solid orange;
    }

        .counters.warning span:last-child {
            color: orange;
        }

    .counters span:nth-child(3) {
        font-size: 20px;
    }

    .counters span:last-child {
        float: right;
        font-size: 26px;
    }


@keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.1;
    }

    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }

    50% {
        opacity: 0.1;
    }

    to {
        opacity: 1.0;
    }
}

.tableoverflow {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.auth {
    padding: 2px 10px !important;
    margin: 0px !important;
    line-height: 0px;
    text-align: right;
}

    .auth a {
        padding: 0px !important;
        margin: 0px !important;
        color: white;
        font-size: 11pt;
    }

svg {
    fill: white;
    stroke: white;
    height: 12pt;
    width: 12pt;
}

    svg path {
        stroke: white;
    }

.color-white {
    color: white;
}

.btn-link {
    float: left;
    line-height:1;
}

    .btn-link a {
        color: white;
        font-size: small;
    }

.field-validation-error {
    color:red;
}

#detailUserImage {
    height: 50px !important;
    width: 50px !important;
    float: left;
    margin-right: 8px;
}

.loading {
    color: gray;
    animation: fade 3000ms infinite;
    -webkit-animation: fade 3000ms infinite;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
    width: 100%;
    font-size: x-large;
}

#connectStatus {
    float: left;
    color: white;
    background-color: green;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cfdcec;
    background: #be0b0b;
    box-shadow: 0 0 5px gray;
    margin-right: 5px;
}

    #connectStatus.connected {
        background-color: green;
    }

    #connectStatus.disconnected {
        background-color: red;
    }

    #connectStatus.reconnect {
        animation: fade 1000ms infinite;
        -webkit-animation: fade 1000ms infinite;
        background-color: red;
    }
    
.d-md-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}