/*
    Tutaj przechowuję style stworzone na potrzeby kontrolek w EKreisel2022 i Kreisel.PulpitKontrahenta.Viewer.2022.
*/

/* Wykorzystywane na Login.aspx*/
.login-body-content {
    position: relative;
    background: #f0f0fa;
    /*background-color: #323a67;*/
    -webkit-transition: padding 0.3s;
    transition: padding 0.3s;
    min-height: 100vh;
    padding-left: 0;
    padding-right: 0;
}

/* Wykorzystywane na Login.aspx*/
.login-ms-lock-screen {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    /*/align-items: center;*/
    /*background-image: url('https://via.placeholder.com/1920x1080');*/
    background-size: cover;
    background-position: center center;
    z-index: 2;
    /*text-align: center;*/
    color: #fff;
    margin-bottom: 2rem;
}

/* Wykorzystywane na Login.aspx*/
.loginValidationError2 {
    color: red;
    padding-left: 5px;
}


.loginTitle {
    text-align: center;
}

.panelSpace {
    height: 20px;
}

.ek-koszyk-label-top, .ek-koszyk-label-right {
    background-color: #ff8306;
    border-radius: 100%;
    color: white !important;
    font-family: Tahoma;
    font-size: 12px !important;
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.ek-koszyk-label-top {
    display: inline-block;
    right: 6px;
    top: -24px;
}

.ek-koszyk-label-right {
    display:table;
    top:-43px;
    left:33px;
}


.ms-dark-theme .ek-koszyk-label-top .ek-koszyk-label-right {
    background-color: #2a2e5b;
}


/* 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
    To są style wykorzystywane przez kontrolkę ProduktControl, stąd przedrostek ek-pc.
    Wykorzystują Container Queries. 
*/
.ek-pc-row {
    container-type: inline-size;
    container-name: ekPCRow;
}

/* Styl dla części opisowej kontrolki ProduktControl. Odpowiednik col-9. */
.ek-pc-desc {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

/* Styl dla obrazka w kontrolce ProduktControl. Odpowiednik col-3. */
.ek-pc-img {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

/* Styl dla przycisku w kontrolce ProduktControl. Odpowiednik col-2. */
.ek-pc-btn {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

@container ekPCRow (max-width: 350px) {
    /* Dla wąskiego kontenera odpowiada col-12. */
    .ek-pc-desc {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        font-size: small;
    }
    /* Dla wąskiego kontenera znika. */
    .ek-pc-img {
        display: none !important;
    }
    /* Dla wąskiego kontenera. Odpowiednik col-3. */
    .ek-pc-btn {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }
}


.ek-pc-btn2 {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: transparent;
    background-image: none;
    color: #fda600;
    border-color: #fda600;
    border-width: thin;
}


/* desktop */
@media (pointer: fine), (pointer: none) {
    .ek-pc-btn2 {
        border-style: none;
    }
        .ek-pc-btn2:hover {
            background-color: #fda600;
            color: white;
        }        
}


@media (pointer: coarse) {
    /* mobile device */
    .ek-pc-btn2 {
        border-style: solid;
    }
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* To są style wykorzystywane przez kontrolkę PKKolorPicker */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.ek-kolorpicker-hidden {
    display: none;
}

.ek-kolorpicker-visible {
    display: inline;
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* To są style KP - katalog produktów                                    */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
.ek-kp-element {
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
    container-type: inline-size;
    container-name: elementContainer;
}

    .ek-kp-element:hover {
        background-color: red;
        border-radius: 5px;
        background-color: #f0f0fa; /* #878793 #4f8dca  #fda600; */
        border-color: #4f8dca;
        cursor: pointer;
    }


/* Klasa ek-kp-kodkreisel z container query odwołująca się do elementContainer */
.ek-kp-kodkreisel {
    /* odpowiednik col-1 */
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    /*padding-left: 15px;*/

    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

@container elementContainer (max-width: 500px) {
    .ek-kp-kodkreisel {
        /* odpowiednik col-2 */
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

.ek-kp-nazwa {
    /*font-weight: 600;*/
    /*color: #fda600;*/
    /*margin-left:1rem;*/
}

.ek-kp-nazwa-container {
    padding-top: 0.1rem;
}

.ek-icons {
    font-family: 'Arial';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


.ek-smallfont-on-smallscreen {
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Styl dla obrazków na stronie welcome. */
.ek-image {
    font-size: 36pt !important;
    color: Highlight;
}

/* Styl dla cytatu */
.ek-quotation {
    color:darkorange;
    font-family: 'Times New Roman';
    font-style: italic;
    font-size:large;
}


/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Styl dla logo na górze. */
.ek-logo{
    height:21px;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Styl dla klepsydry na SiteMaster. */
.ek-wait-main{
    position:fixed;
    left:50%;
    top:1.5rem !important;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Styl dla komunikatów podczas importu zamóień. */
.ek-msg-background-error {
    background-color: #ff0018;
}

.ek-msg-background-success {
    background-color: #28a745;
}

.ek-msg-color-white {
    color: white;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* 2025-10-22 */

/* Styl dla wersji testowej */

.ek-test-title {
    font-weight: 700;
    font-size: x-large;
    color: #fda600;
}

@media only screen and (max-width: 600px) {
    .ek-test-title {
        font-size:unset;
    }
}


.blink_me {
    animation: blinker 3s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}