@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

dl {
    margin-top: 0;
    margin-bottom: 20px;
}



dt,
dd {
    line-height: 1.42857143;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /*todo*/
}



dt {
    font-weight: 700;
}



dd {
    margin-left: 0;
}



@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }



    .dl-horizontal dd {
        margin-left: 180px;
    }
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.blink {
    color: red;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.custom-container{
    font-size: 18px;
}



/* Dialog buttons (OK / Cancel, trash, ...) were unclickable and the dialog showed as a thin line.
   Telerik UI for Blazor 15 puts the class k-window-actions on the row of dialog buttons, and
   SattPlatfromTheme.css gives that class a margin of -5em (it was meant for the title-bar icons of
   an older markup). The two margins took about 140px off the dialog's height, so its content was
   clipped and the page overlay sat over the buttons. Higher specificity than the theme rule, so the
   order of the stylesheets does not matter. */
.k-window .k-actions.k-window-actions {
    margin: 0;
}

/* The "+" that opens a grid row's details (Справка, Деагрегиране) was drawn about 180px tall.
   SattPlatfromTheme.css stretches the hierarchy cell's icon to width and height 100% (meant for the
   old font icons); Telerik 15 draws an SVG there, which then filled the whole column. Higher
   specificity than the theme rule, as above. */
.k-grid .k-hierarchy-cell > .k-svg-icon.k-icon {
    width: 16px;
    height: 16px;
    padding: 0;
    display: inline-flex;
}

/* Shown by the framework (a components-reconnect-* class on the element) while the live connection to the
   server is down or the server no longer knows this page. See the element in App.razor. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal[class*="components-reconnect-"] {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2000000;
    justify-content: center;
    padding: 12px 16px;
    background: #b3261e;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
#components-reconnect-modal .reconnect-box { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; }
#components-reconnect-modal a.reload { color: #fff; font-weight: 600; text-decoration: underline; }