@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

body {
/*    background: url('../images/AlCoda/AlCodaHintergrundGrau.png') left top repeat-y;
    background-color: #dcdcdc66;
*/
}

.monaco-editor-container {
   height: 10rem;
}

/* -- Standard Blazor ---------------------------------------- */

/*html, body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*/
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}


#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;
    }

/* == Fonts ===============================================================*/
@font-face {
    font-family: 'VeteranTypewriter';
    src: url('other-fonts/veteran_typewriter.ttf') format('truetype');
}

/* == NetBiblio WebClient ===============================================================*/

.NetBiblioWebClient {
    color: var(--bs-primary);
    text-shadow: 2px 2px 25px gray;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.PageHeader-Card-Left {
    font-weight: bold;
    font-size: 2rem;
}

.PageHeader-Card-Center {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}


.FileUploadGlobal {
    color: transparent;
}

.MARC-Start {
    transform: rotateY(90deg);
}

.MARC-End {
    transition: all 2s linear;
}

.Normal-End {
    transform: rotateX(90deg);
    height: 0px;
    transition: all 3s ease;
}

.SectionBackground {
    background-color: rgba(255, 255, 255, 0.7);
}

.PageCard-Content {
    max-width: calc(100vw - 33rem);
}

.Hint-Button {
    color: var(--bs-primary);
    font-weight: 700;
}

.ParameterName {
    color: var(--bs-purple);
    font-family: var(--bs-font-monospace);
}

.Cover {
    max-height: 15rem;
}

/* -- NetBiblio dialogs ---------------------------------------------------------------*/

.Dialog-Section-Header {
    font-size: var(--h5size);
    font-weight: 500;
    color: var(--bs-primary);
    border-bottom: 1px solid #dee2e6;
}

.Dialog-Width-30 {
    width: 30rem;
    min-width: 30rem;
}

.Dialog-Width-24 {
    width: 24rem;
    min-width: 24rem;
}

.Dialog-Width-22 {
   width: 22rem;
   min-width: 22rem;
}

.Dialog-Width-20 {
   width: 20rem;
   min-width: 20rem;
}

.Dialog-Width-18 {
    width: 18rem;
    min-width: 18rem;
}

.Dialog-Width-16 {
    width: 16rem;
    min-width: 16rem;
}

.Dialog-Width-14 {
    width: 14rem;
    min-width: 14rem;
}

.Dialog-Width-12 {
    width: 12rem;
    min-width: 12rem;
}

.Dialog-Width-10 {
    width: 10rem;
    min-width: 10rem;
}

.Dialog-Width-9 {
    width: 9rem;
    min-width: 9rem;
}

.Dialog-Width-8 {
    width: 8rem;
    min-width: 8rem;
}

.Dialog-Width-7 {
   width: 7rem;
   min-width: 7rem;
}

.Dialog-Width-6 {
    width: 6rem;
    min-width: 6rem;
}

.Dialog-Width-5 {
   width: 5rem;
   min-width: 5rem;
}

.Dialog-Width-4 {
    width: 4rem;
    min-width: 4rem;
}

.Dialog-Width-3 {
    width: 3rem;
    min-width: 3rem;
}

.Dialog-Width-2 {
    width: 2rem;
    min-width: 2rem;
}


/*-- Colors ----------------------*/

/* == Syncfusion ================================================================ */

/* -- Syncfusion icons ---------------------------------------------------------------- */
.e-move-up::before {
    content: '\e7d1';
}

.e-move-down::before {
    content: '\e7b9';
}

.e-edit::before {
    content: '\e78f';
}

.e-insert-above::before {
    content: '\e783';
}

.e-chevron-right::before {
    content: '\e76a';
}

.e-import::before {
    content: '\e77a';
}

/* -- Syncfusion dialog ------------------------------------------------------------------ */
.e-footer-content > .e-btn {
    min-width: 8rem;
}

.e-dialog .e-dlg-content {
    /*background-color: var(--bg-light);*/
    background-color: #e9ecef6e;
}

.e-dialog .e-footer-content {
    background-color: var(--bg-light);
}


/* -- Syncfusion checkbox ---------------------------------------------------------------- */
.e-checkbox-wrapper .e-label {
    font-size: inherit;
}

.e-checkbox-wrapper .e-frame {
    border-radius: 2px;
}

/* -- Syncfusion grid ---------------------------------------------------------------- */
.e-grid .e-headercelldiv {
    font-weight: 400 !important;
}

.e-grid .e-headercell {
    /*background-color: var(--bg-light);*/
    background-image: linear-gradient(0deg, rgb(237 237 237) 0%, rgb(237 237 237) 7%, rgba(251,251,251,1) 92%, rgb(251 248 248) 98%)
}

/* -- Syncfusion Accordion ---------------------------------------------------------------- */
.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    font-size: var(--h5size);
}

/* -- Syncfusion tooltip ---------------------------------------------------------------- */
.e-tooltip-wrap {
    opacity: 1;
}

    .e-tooltip-wrap.e-popup {
        background-color: rgb(245, 245, 245);
        border: 1px solid lightgray;
        box-shadow: 4px 4px 4px lightgrey;
    }

    .e-tooltip-wrap .e-tip-content {
        color: black;
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight);

    }

    .e-tooltip-wrap .e-arrow-tip.e-tip-top {
    }

    e-tooltip-wrap .e-arrow-tip-inner.e-tip-right, .e-tooltip-wrap .e-arrow-tip-inner.e-tip-left, .e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom, .e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
        color: lightgray;
    }

    .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
        border-bottom: 12px solid lightgray;
    }


/*   .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
      border-bottom: 12px solid lightgray;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
   }
*/
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.2);
        text-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    80% {
        transform: scale(1.8);
        text-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    100% {
        transform: scale(1.0);
        text-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}
