/* Rules */
:root {
    --arabic-font: "Cairo", sans-serif;
    --english-font: "Raleway", sans-serif;
}


/* Components */
.error-container {
    position: fixed;
    left: 15px;
    bottom: 15px;
    padding: 15px 27px 15px 15px;
    background-color: #dc3545eb;
    width: 300px;
    min-height: 100px;
    border-radius: 12px;
    opacity: .94;
    z-index: 1000000;
    transition: all .3s;
}
.error-container span ,
.error-container .error-content {
    color: white !important;
}
.error-container .error-content {
    font-size: 0.85rem;
}
.error-container[status="closed"] {
    opacity: 0;
    visibility: hidden;
}
.error-container[status="opened"] {
    opacity: .9;
    visibility: visible;
}
.error-container span[error-close] {
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: right;
    cursor: pointer;
}

.dark-mode .pcpAmountLabel ,
.dark-mode .pcpVolumeLabel ,
.dark-mode .pcpPriceLabel ,
.dark-mode #NozzleStatus_pcpPumpStatus_4{
    color: #333;
}

@media (max-width: 500px) {
    .error-container {
        width: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
        min-height: 50px;
    }

    
    .error-container span[error-close] {
        top: 50%;
        transform: translateY(-50%);
    }
}


/* Dashboard Page */
.dashboard-card .dt-bootstrap4 input.form-control{
    width: 130px;
}