html {
    font-size: 14px;
}

a {
text-decoration: none;
}

@media (min-width: 800px) {
    html {
        font-size: 16px;
    }
}

/* Small Resolution - Mobile */
@media (min-width: 10px) and (max-width: 800px) {

    div.largeConsole {
        display: none;
        visibility: hidden;
    }
    div.smallConsole {
        display: block;
        visibility: visible;
    }
}

/* Large Resolution - Desktop */
@media (min-width: 800px) {

    div.largeConsole {
        display: block;
        visibility: visible;
    }
    div.smallConsole {
        display: none;
        visibility: hidden;
    }
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #fbf8ed;
}

.telemetryData {
    font-size: 14px;
    font-weight: 600;

}

.bg-patina {
    background-color: #007877dd;
    color: #ffffff;
}

.patina-footer {
    background-color: #fbf8edcc;
}

.tabl {
    width: 100%;
    border: none;
    display: table
}

.rowNew {
    height: 20px;
    display: table-row
}

.cellNew {
    border: 1px solid #ffc791;
    padding: 4px;
    display: table-cell
}

.btn-patina-alternate {
    color: #fff;
    background-color: #b77332;
    border-color: #835224;
}

.bg-patina-alternate {
    --bs-bg-opacity: 1;
    background-color:#b77332 !important;
}

.PageTitle {
    font-size: 28px;
    font-weight:500;
    color: #04414d;
    padding-bottom:15px;
}

div.ParentContainer {
    margin: 10px 0 20px 0;
    padding:15px;
    border-radius: 10px;
    width: 100%;
}

div.ParentContainerSmall {
    margin: 10px 0 20px 0;
    padding: 0 0 5px 0;
    border-radius: 10px;
    width: 100%;
}


.CardSeparator {
    background-color: #ffffff;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    width: 50px;
}


.ParentBackground {
    background-color: #dcf9f7;
}

.ParentBackgroundInactive {
    background-color: #cccccc;
}

.ParentBackgroundUpcoming {
    background-color: #ffeecb;
}

.ParentTelemetryBackground {
    background-color: #f6f3f1;
}

.ParentSmallPeacockBackground {
    background-color: #e7f2e5;
}


.wellData {
    white-space:nowrap;
}

.consoleLabel {
    background-color: #6ba6a3;
    color: #204b49;
    font-weight: 400;
    font-size:18px;
    float:left;
    padding: 0 5px 0 5px;
}


.consoleData {
    background-color: #95bfbd;
    color: #204b49;
    font-weight: 600;
    font-size:18px;
    float:left;
    padding: 0 5px 0 5px;
}

.console {
    background-color: #c5e6e4;
    float:left;
}

.ExportLink {
    float: right;
}

a.IconLinkText:visited, a.IconLinkText:active, a.IconLinkText:link {
    text-decoration: none;
    padding: 0 10px 0 10px;
    color: #204b49;
    font-weight: 400;
    font-size:18px;
}

.Version {
    font-size: 10px;
    color: #DDDDDD;
}

.SearchIcon {
    color: #44a297;
}

.SearchIconInactive {
    color: #888888;
}

.SearchIconFuture {
    color: #9d8b64;
}

.InactiveIcon {
    color: #c3d9d8;
}

.InactiveIconInactive {
    color: #888888;
}

.InactiveIconUpcoming {
    color: #bdb199;
}

.ActiveGoodIcon {
    color: #8ad265;
    text-shadow: 0 0 5px #baeca1;
}

.ActiveProblemIcon {
    color: #ff2f00;
    text-shadow: 0 0 5px orangered;
}

.ExportIcon {
    color: #44a297;
    font-family: Calibri;
    font-size: 14px;
    margin-top:21px;
}

.ExportReady {
    color: #8ad265;
    text-shadow: 0 0 4px #baeca1;
    font-size:22px;
    vertical-align: middle;
}

.ExportNotReady {
    color: #b9dcda;
    font-size:22px;
    vertical-align: middle;
}

.ExportReadySmall {
    color: #8ad265;
    text-shadow: 0 0 4px #baeca1;
    font-size:12px;
   /* vertical-align: middle;  */
}

.ExportNotReadySmall {
    color: #b9dcda;
    font-size:12px;
   /* vertical-align: middle;*/
}

.InactiveExportReady {
    color: #aaaaaa;
    text-shadow: 0 0 4px #cccccc;
    font-size:22px;
    vertical-align: middle;
}

.InactiveExportNotReady {
    color: #aaaaaa;
    font-size:22px;
    vertical-align: middle;
}

.TelemetryGoodIcon {
    color: #8ad265;
    text-shadow: 0 0 5px #baeca1;
}

.TelemetryBadIcon {
    color: #da4d2e;
    text-shadow: 0 0 5px orangered;
}

.SaveIcon {
    font-family: Calibri;
    font-size: 14px;
    width:125px;
}

.ClarityDownloadIcon {
    color: #44a297;
}

.TextDownloadIcon {
    color: #44a297;
}

.ClarityDownloadIconDark {
    color: #204b49;
}

.PatinaDropDown {
    font-family: Calibri;
    font-size: 14px;
}

.PatinaTextBox {
    font-family: Calibri;
    font-size: 14px;
}


.patinaNav {
    @media (min-width: 10px) and (max-width: 800px) {
        padding: 2px;
    }
    @media (min-width: 800px) {
            padding: 10px;
    }
    text-align: center;
    /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);*/
    /*background: #00787533;*/
}

.patinaNav a {
    @media (min-width: 10px) and (max-width: 770px) {
        font-size: 12px;
    }
    @media (min-width: 800px) {
        font-size: 20px;
    }

    transition: 0.3s ease;
    /*background: #007877dd;*/
    color: #309191;
    text-decoration: none;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    /*padding: 20px 0;*/
    /*margin: 0 5px;*/
    /*font-size: 17px;*/
}
.patinaNav a:hover {
    border-top: 4px solid #61adaf;
    border-bottom: 4px solid #61adaf;
    padding: 6px 0;
}


.badge-patina {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #779996;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.badge-round-patina {
    color: #779996;
    background-color: #ffffff77;
    border-color: #999999;
    font-size: 16px;
    font-weight: 550;
    border-radius: 50%;
    width: 40px;       /* Adjust size as needed to fit your double digits */
    height: 40px;      /* Must match width */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;        /* Reset padding to prevent oval shape */
    line-height: 1;    /* Ensures text centering */
    vertical-align: middle; /* Ensures it sits in the middle of the table cell text line */
}


.btn-well {
    color: #47837b;
    background-color: #ffffff;
    border-color: #057876;
    font-size: 14px;
}
.btn-well:hover {
    color: #024442dd;
    background-color: #dbfbff;
    border-color: #07c4c0;
}
.btn-check:focus + .btn-well, .btn-well:focus {
    color: #024442dd;
    background-color: #dbfbff;
    border-color: #07c4c0;
    box-shadow: 0 0 0 0.25rem rgba(2,68,66,.5);
}
.btn-check:checked + .btn-well, .btn-check:active + .btn-well, .btn-well:active, .btn-well.active, .show > .btn-wellg.dropdown-toggle {
    color: #024442dd;
    background-color: #dbfbff;
    border-color: #07c4c0;
}
.btn-check:checked + .btn-well:focus, .btn-check:active + .btn-well:focus, .btn-well:active:focus, .btn-well.active:focus, .show > .btn-well.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(2,68,66,.5);
}
.btn-well:disabled, .btnwell.disabled {
    color: #024442dd;
    background-color: #ffffff;
    border-color: #057876;
}



.btn-wellInactive {
    color: #444444;
    background-color: #ffffff;
    border-color: #888888;
    font-size: 14px;
}
.btn-wellInactive:hover {
    color: #555555;
    background-color: #cccccc;
    border-color: #666666;
}
.btn-wellInactive:disabled, .btnwellInactive.disabled {
    color: #444444;
    background-color: #ffffff;
    border-color: #888888;
}

.btn-wellFuture {
    color: #988965;
    background-color: #ffffff77;
    border-color: #b0a68f;
    font-size: 14px;
}
.btn-wellFuture:hover {
    color: #555555;
    background-color: #fdeecd;
    border-color: #d6caae;
}
.btn-wellFuture:disabled, .btnwellInactive.disabled {
    color: #444444;
    background-color: #ffffff;
    border-color: #b0a68f;
}

.clarityColor {
    background-color:#c899f7;
    padding-top:3px;
    padding-bottom:3px;
}

.patinaColor {
    background-color:#a4f799;
    padding-top:3px;
    padding-bottom:3px;
}

.curatedEvenColor {
    background-color:#b17b4c;
    padding-top:3px;
    padding-bottom:3px;
}

.curatedOddColor {
    background-color:#d0a077;
    padding-top:3px;
    padding-bottom:3px;
}

.QcEvenColor {
    background-color:#6ba6a2;
    padding-top:3px;
    padding-bottom:3px;
}

.QcOddColor {
    background-color:#95bfbd;
    padding-top:3px;
    padding-bottom:3px;
}

.TelemetryEvenColor {
    /*background-color:#e4d2c7;*/
    padding-top:3px;
    padding-bottom:3px;
    padding-left:2px;
    padding-right:2px;
    border-left: solid 1px #735c49;
    border-right: solid 1px #735c49;
    color: #735c49;
}

.TelemetryOddColor {
    /*background-color:#ebded6;*/
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 2px;
    border-left: solid 1px #735c49;
    border-right: solid 1px #735c49;
    color: #735c49;
    background-color: #f1ebe6;
}

.hoverTable tr:not(.telemetryHeader):hover, .hoverTable tr:not(.telemetryHeader):hover .TelemetryOddColor {
    background-color: #e0c5b5 !important;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 2px;
    color: #735c49;
    border-left: solid 1px #735c49;
    border-right: solid 1px #735c49;
}

.hoverTable tr:not(.telemetryHeader):hover, .hoverTable tr.TelemetryOddColor:not(.telemetryHeader):hover {
    background-color: #e0c5b5 !important;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 2px;
    color: #735c49;
    border-left: solid 1px #735c49;
    border-right: solid 1px #735c49;
}

.telemetryHeader {
    background-color:#735c49;
    padding-top:3px;
    padding-bottom:3px;
    font-weight: 600;
    color: #e4d2c7;
}


.tableQc {
    padding-top:3px;
    padding-bottom:3px;
}


.ring
{
    position:absolute;
    /*top:50%;*/
    top: 200px;
    left:50%;
    transform:translate(-50%,-50%);
    width:150px;
    height:150px;
    background:transparent;
    border:3px solid #3c3c3c;
    border-radius:50%;
    text-align:center;
    line-height:150px;
    font-family:sans-serif;
    font-size:20px;
    color:#b77332;
    letter-spacing:4px;
    text-transform:uppercase;
    text-shadow:0 0 10px #fff000;
    box-shadow:0 0 20px rgba(0,0,0,.5);
    z-index: 255;
}
.ring:before
{
    content:'';
    position:absolute;
    top:-3px;
    left:-3px;
    width:100%;
    height:100%;
    border:3px solid transparent;
    border-top:3px solid #b77332;
    border-right:3px solid #b77332;
    border-radius:50%;
    animation:animateC 2s linear infinite;
}
.ring span
{
    display:block;
    position:absolute;
    top:calc(50% - 2px);
    left:50%;
    width:50%;
    height:4px;
    background:transparent;
    transform-origin:left;
    animation:animate 2s linear infinite;
}
.ring span:before
{
    content:'';
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#b77332;
    top:-6px;
    right:-8px;
    box-shadow:0 0 20px #2c3034;
}
@keyframes animateC
{
    0%
    {
        transform:rotate(0deg);
    }
    100%
    {
        transform:rotate(360deg);
    }
}
@keyframes animate
{
    0%
    {
        transform:rotate(45deg);
    }
    100%
    {
        transform:rotate(405deg);
    }
}



.loader {
    position: absolute;
    top: 350px;
    left: calc(50% - 32px);
    width: 164px;
    height: 164px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.loading {
    position: absolute;
    top: 65px;
    left: calc(50% - 140px);
    color: #007877;
    font-size: 24px;
    font-weight: 600;
    text-shadow: 1px 1px 6px #b77332;
    width:300px;
    z-index: 256;
}

.inner.loading.box {
    left: calc(50% - 150px);
    width:325px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow:0 0 20px rgba(0,0,0,.5);
    z-index: 255;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #b77332;
    box-shadow:0 0 20px rgba(0,0,0,.5);
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #b77332;
    box-shadow:0 0 20px rgba(0,0,0,.5);
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #b77332;
    box-shadow:0 0 20px rgba(0,0,0,.5);
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.InventoryData {
    color: #222222;
    font-size: 16px;
    font-weight: 600;
}
.InventoryColumnTitle {
    color: #222222;
    font-size: 16px;
    font-weight: 300;
}