/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    padding-bottom: 20px;
    /*transform: scale(0.8);*/
    transform-origin: 0 0;
    /*overflow : hidden;*/
    overflow-x: hidden;
    /*overflow-y: hidden;*/
    height: 100%;
    background-color: rgb(255 255 255);
    color: rgba(0,0,0,0.7);
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-shadow: 2px 2px 41px 3px rgba(0,0,0,0.47);
    -moz-box-shadow: 2px 2px 41px 3px rgba(0,0,0,0.47);
    box-shadow: 2px 2px 41px 3px rgba(0,0,0,0.47);
    margin-left: 240px;
    margin-top: 70px;
    width: 85%;
}

.developmentBorder {
    border-top: 1px solid rgba(62,208,59,1) !important;
}
.developmentText {
    color: rgba(62,208,59,1) !important;
}

.footer-content {
    padding-bottom: 10px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.offScreen {
    position: absolute;
    top: 1000px;
    right: -1000px;
}

.datatable-border {
    border: 1px solid rgba(68,68,65,0.4);
    border-radius: 8px;
    padding: 20px;
    margin: 0px;
}

.box {
    display: flex-inline;
    flex-direction: row;
    /* width: 100%; */
    padding: 10px;
    height: 55px;
    background-color: black;
}

.NoBorder {
    border: 0px;
}

.BackGroundTransparent {
    background: rgba(0,0,0,0.0);
}

ul li a span {
    margin-left: 30px;
}

.pointer {
    cursor: pointer;
}

.btn-icon {
    background: white;
    border: 0px;
}

.cb9-bg-color {
    background-color: rgba(68,68,65,1)!important;
}
.cb9-bg-color2 {
    background-color: rgba(57,57,57,1) !important;
}
.x-topLine {
    background-color: rgba(68,68,65,1);
    /*background-color: rgb(230,230,218);*/
    height: 64px;
    padding-top: 8px;
    margin-bottom: 10px;
    z-index: 1200;
    /*border-bottom: 1px solid rgb(153,153,145);*/
}

/* Stronger specificity to override Bootstrap */
.btn.x-topLine-txt-color,
.btn.x-topLine-txt-color:active,
.btn.x-topLine-txt-color.active,
.btn.x-topLine-txt-color:focus,
.btn.x-topLine-txt-color:visited,
.btn.x-topLine-txt-color:focus-visible {
    color: rgb(140, 140, 140) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

    .btn.x-topLine-txt-color:hover {
        color: rgb(252, 250, 252) !important;
    }

.x-menu {
    background-color: rgb(255,255,255);
    height: calc(100vh - 60px);    
}

.x-menu-txt-color {
    color: rgb(55, 55, 55);
}

.x-menu-txt-color:hover {
    border-radius: 5px;
    background-color: rgba(68,68,65,1);
}

.nav-link:hover i,
.nav-link:hover span
{
    color: white;
}

.btn-secondary:hover {
    background-color: rgba(68, 68, 65, 1);
}
.btn-secondary-selected {
    background-color: rgba(68, 68, 65, 1);
}

.x-txt-color {
    color: rgb(152, 150, 152);
}


.x-btn {
    color: #000;
    border-color: rgba(90, 98, 104, .35);
}
.x-btn:hover {
    color: #fff;
    background-color: rgba(68, 68, 65, 1);
    border-color: #545b62;
}
.x-btn:focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

@media (max-width: 992px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    .x-menu-width {
        width: 55px;
    }
}

@media (min-width: 992px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */
    .x-menu-width {
        width: 170px;
    }
}

/*.x-bg-content {
    background-color: rgb(255,255,255);
    height: calc(100vh - 60px);
}*/

.x-footer {
    border-top: 1px solid rgba(140, 149, 143, 0.6);    
    background-color: rgb(255, 255, 255);
    z-index: 950;
}

/*Styled from Bootstrap 4*/
/*So Grid (https://getbootstrap.com/docs/5.0/layout/grid/) and Utilities (https://getbootstrap.com/docs/5.0/layout/utilities/) are supposed to be used instead.*/
.form-group {
    margin-bottom: 1rem;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.project {
    background-color: rgba(0,0,0,.03)
}

.dialog-background {
    background-color: rgba(68,68,65,1);
}

.mt-10 {
    margin-top: 5rem !important;
}

.fs-7 {
    font-size: .9rem;
}
.fs-8 {
    font-size: .8rem;
}
.fs-9 {
    font-size: .7rem;
}
.fs-10 {
    font-size: .6rem;
}
.fs-11 {
    font-size: .5rem;
}

.mt-6 {
    margin-top:25px;
}
.mt-7 {
    margin-top: 30px;
}
.mt-8 {
    margin-top: 35px;
}
.mt-9 {
    margin-top: 40px;
}
.mt-10 {
    margin-top: 45px;
}
.mt-50 {
    margin-top: 250px;
}
.mt-100 {
    margin-top: 450px;
}
.my-50 {
    margin-top: 250px;
    margin-bottom: 250px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

    .form-row > .col {
        padding-left: 5px;
        padding-right: 5px;
    }

label {
    margin-bottom: 0.5rem;
}

.select2-container {
    z-index: 1100;
}


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

.profile-pic {
    display: inline;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
}

.top-align {
    position: relative;
    top: -0.5em;
    transform: translateY(-50%);
}

.rounded-corners-top {
    border-radius: 8px 8px 0px 0px;
}
.rounded-corners-bottom {
    border-radius: 0px 0px 8px 8px;
}

.no-uppercase {
    text-transform: none!important;
}