:root {
    --spColorBlack: #000;
    --spColorBlack2: #333;
    --spColorWhite: #FFF;
    --spColorWhite80: rgba(255,255,255,0.8);

    --spColorVeryLightGrey: #fcfcfc;
    --spColorGreyVeryLight: #fcfcfc;
    --spColorLightGrey: #dcdcdc;
    --spColorGreyLight: #dcdcdc;
    --spColorLightGrey2: #efefef;
    --spColorGreyLight2: #efefef;
    --spColorGrey: #999999;
    --spColorGreyDark: #555555;
    --spColorDarkGrey: #555555;

    --spColorVeryLightPurple: #f7eaf4;
    --spColorPurpleVeryLight: #f7eaf4;
    --spColorPurpleLight: #bf54b2;
    --spColorLightPurple: #bf54b2;
    --spColorPurpleLight80: rgba(139,66,130,0.8);
    --spColorLightPurple80: rgba(139,66,130,0.8);
    --spColorPurple: #8b4282;
    --spColorPurple2: #9f5194;
    --spColorPurpleDark: #660060;
    --spColorDarkPurple: #660060;

    --spColorVeryLightRed: #fff5f5;
    --spColorRedVeryLight: #fff5f5;
    --spColorRed: red;

    --spColorOrange: #FF6600;
    --spColorOrange2: #FF8000;
    
    --spColorYellow: #ffb020;
    --spColorYellow2: #ddab00;
    --spColorYellow3: #f0c000;
    --spColorYellow4: #f0ad4e;

    --spColorVeryLightBlue: #f0f6ff;
    --spColorBlueVeryLight: #f0f6ff;
    --spColorLightBlue: #d7f5fe;
    --spColorBlueLight: #d7f5fe;
    --spColorBlue: blue;

    --spColorVeryLightGreen: #f1fff4;
    --spColorGreenVeryLight: #f1fff4;
    --spColorGreenLight: #bbff99;
    --spColorLightGreen: #bbff99;
    --spColorGreen: #8BB900;
    --spColorGreen2: #9ac800;
    --spColorGreenDark: #008000;
    --spColorDarkGreen: #008000;


    --spPageMinWidth: 300px;
    --spPageNormalWidth: 94vw;
    --spPageMaxWidth: 1000px;
}

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button,
input, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    outline: none;
    box-sizing: border-box;
}
pre { overflow: visible; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    scroll-behavior: smooth;
}
div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
body {
    /*background-color: var(--spColorWhite);*/
    color: var(--spColorBlack);
    overflow: overlay;
    transition-duration: 0.4s;
    background-image: URL('static_images/background.png');
}
h1, h2, h3, h4, h5 {
    line-height: 120%;
    margin: 0px;
}
a {
/*	text-decoration: none; */
    color: var(--spColorBlack);
}
.spicaHidden, .spHidden {
    display: none;
}
.spDisabled { pointer-events: none; cursor: initial; opacity: 0.57; }
.fullPageBlock {
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    align-items: center;
}
.fullPageColumn {
    flex-direction: column;
    position: relative;
    flex-grow: 1;
    width: 98vw;
    align-items: center;
}
.fullWidthContainer {
    width: 100%;
}
.mainContentBlock {
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    width: 100%;
}
.mainContentAsForm {
    width: 100%;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vh;
}
.messageBox {
    display: none;
    position: fixed;
    /*left: 50vw;*/
    top: 52vh;
    /*transform: translate(-50%, -51%);*/
    /*transform: translateY(-51%);*/
    transform: translate(-0.2vw,max(-51.5%, -51.5vh));
    max-height: 95vh;
    max-width: 98vw;
    z-index: 20;
    border-radius: 10px;
    background-color: ghostwhite;
    flex-direction: column;
    row-gap: 20px;
    padding: 10px;
    align-items: flex-start;
    border: 1px solid dimgrey;
    -webkit-box-shadow: 1px 2px 10px 1px dimgrey;
    -moz-box-shadow: 1px 2px 10px 1px dimgrey;
    box-shadow: 1px 2px 10px 1px dimgrey;
}
.messageBoxText {
    align-items: flex-start;
    text-align: center;
    width: 100%;
    flex-direction: column;
}
.messageBoxButtonBlock {
    justify-content: center;
    width: 100%;
    column-gap: 20px;
}
#spinner {
    top: 45vh;
    left: 50vw;
    position: fixed;
    display: none;
    width: 70px;
    height: 70px;
    border: 5px solid rgba(55,155,255,.5);
    border-radius: 50%;
    border-top-color: rgba(0,100,200,.9);
    -webkit-box-shadow: 0px 0px 10px 10px lightblue;
        -moz-box-shadow: 0px 0px 10px 10px lightblue;
    box-shadow: 0px 0px 10px 10px lightblue;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    background-color: lightblue;
}
@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
#popupWindow {
    min-height: 400px;
    min-width: 300px;
    max-height: min(90%, 90vh);
}
#popupButtonsBlock .btn {
    min-width: 120px;
}
.spRowStartCenter, .spRowStartStart, .spRowCenterStart, .spRowCenterCenter, .spRowSpaceStart, .spRowSpaceCenter, .spRowSpaceEnd, .spRowStartEnd, .spRowEndCenter {
    /*display: flex;*/
    flex-direction: row;
}
.spRowStartCenter {
    justify-content: flex-start;
    align-items: center;
}
.spRowStartStart {
    justify-content: flex-start;
    align-items: flex-start;
}
.spRowCenterCenter {
    justify-content: center;
    align-items: center;
}
.spRowCenterStart {
    justify-content: center;
    align-items: flex-start;
}
.spRowSpaceStart {
    justify-content: space-between;
    align-items: flex-start;
}
.spRowSpaceCenter {
    justify-content: space-between;
    align-items: center;
}
.spRowSpaceEnd {
    justify-content: space-between;
    align-items: flex-end;
}
.spRowEndCenter {
    justify-content: flex-end;
    align-items: center;
}
.spRowStartEnd {
    justify-content: flex-start;
    align-items: flex-end;
}
.spColumnStartCenter, .spColumnStartStart, .spColumnStartEnd, .spColumnCenterStart, .spColumnEndStart, .spColumnCenterCenter {
    /*display: flex;*/
    flex-direction: column;
}
.spColumnStartCenter {
    justify-content: flex-start;
    align-items: center;
}
.spColumnCenterStart {
    justify-content: center;
    align-items: flex-start;
}
.spColumnCenterCenter {
    justify-content: center;
    align-items: center;
}
.spColumnStartStart {
    justify-content: flex-start;
    align-items: flex-start;
}
.spColumnStartEnd {
    justify-content: flex-start;
    align-items: flex-end;
}
.spColumnEndStart {
    justify-content: flex-end;
    align-items: flex-start;
}
.sp100NoWrapHidden {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.spNoWrapHidden {
    white-space: nowrap;
    overflow: hidden;
}
.spCell10 { width: 10px; }
.spCell20 { width: 20px; }
.spCell30 { width: 30px; }
.spCell40 { width: 40px; }
.spCell50 { width: 50px; }
.spCell60 { width: 60px; }
.spCell70 { width: 70px; }
.spCell80 { width: 80px; }
.spCell90 { width: 90px; }
.spCell100 { width: 100px; }
.spCell110 { width: 110px; }
.spCell120 { width: 120px; }
.spCell130 { width: 130px; }
.spCell140 { width: 140px; }
.spCell150 { width: 150px; }
.spCell160 { width: 160px; }
.spCell170 { width: 170px; }
.spCell180 { width: 180px; }
.spCell190 { width: 190px; }
.spCell200 { width: 200px; }
.spCell210 { width: 210px; }
.spCell220 { width: 220px; }
.spCell230 { width: 230px; }
.spCell240 { width: 240px; }
.spCell250 { width: 250px; }
.spCell260 { width: 260px; }
.spCell270 { width: 270px; }
.spCell280 { width: 280px; }
.spCell290 { width: 290px; }
.spCell300 { width: 300px; }
.spCell310 { width: 310px; }
.spCell320 { width: 320px; }
.spCell330 { width: 330px; }
.spCell340 { width: 340px; }
.spCell350 { width: 350px; }
.spCell360 { width: 360px; }
.spCell370 { width: 370px; }
.spCell380 { width: 380px; }
.spCell390 { width: 390px; }
.spCell400 { width: 400px; }
.spCell450 { width: 450px; }
.spCell500 { width: 500px; }
.spCell550 { width: 550px; }
.spCell600 { width: 600px; }
.spCell650 { width: 650px; }
.spCell700 { width: 700px; }
.spCell750 { width: 750px; }
.spCell800 { width: 800px; }
.spGap1 { column-gap: 1px; row-gap: 1px; }
.spGap5 { column-gap: 5px; row-gap: 5px; }
.spGap10 { column-gap: 10px; row-gap: 10px; }
.spGap20 { column-gap: 20px; row-gap: 20px; }
.spGap30 { column-gap: 30px; row-gap: 30px; }
.spGap40 { column-gap: 40px; row-gap: 40px; }
.spGapC40R20 { column-gap: 40px; row-gap: 20px; }
.spGapC20R40 { column-gap: 20px; row-gap: 40px; }
.spPad5 { padding: 5px; }
.spPad10 { padding: 10px; }
.spPad20 { padding: 20px; }
.spWidth100 { width: 100%; }
.spCanWrap { flex-wrap: wrap; }
.spCanWrapText { white-space: normal; }
.spStretch { align-self: stretch; }
.spRight { text-align: right!important; justify-content: flex-end!important; }
.spCenter { text-align: center!important; justify-content: center!important; }
.spLeft { text-align: left!important; justify-content: flex-start!important; }
.spSpace { text-align: center!important; justify-content: space-between!important; }
.spGrow { flex-grow: 1; }
.bootstrap-select > .dropdown-toggle {
    background-color: white;
    border: 1px solid var(--bs-border-color);
}
.tooltip-inner {
    max-width: 300px!important;
    font-size: 110%!important;
}
.spSRAHelpBadge {
    margin-left: 8px;
    cursor: pointer;
    min-height: 20px;
}
.spLogDataChangeSummaryRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    cursor: pointer;
}
.spLogDataChangeSummaryRow.spHeader {
    background-color: #ededed;
    font-weight: 700;
    cursor: initial;
}
.spLogDataChangeSummaryCell {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: normal;
    align-self: stretch;
    border: 1px solid #ddd;
    min-width: 70px;
    padding: 4px 8px;
    flex-grow: 1;
    overflow-wrap: anywhere;
}
.spLogDataChangeSummaryCell ul {
    padding-left: 20px;
}
.spLogDataChangeCellProductName {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
.spStandartInput {
    border-radius: 4px;
    border: 1px solid grey;
    padding: 1px 4px;
    min-height: 28px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0px 0px 4px 0px #ccc;
}
.spMainMenuWholeContainer {
    position: sticky; z-index: 1; top: 1px; min-width: 100%;
    margin-bottom: 5px; padding-left: 5px; padding-right: 5px;
    box-shadow: 0px 3px 7px -4px #777; background-color: var(--spColorWhite80);
    border-radius: 0px 0px 5px 5px;
}
a.spMainMenuLink {
    text-decoration: none;
}
a.spMainMenuLink.spActive {
    color: var(--spColorOrange);
    pointer-events: none; cursor: initial;
}
a.spMainMenuLink:hover {
    text-decoration: underline;
    color: var(--spColorRed);
}
.spGreetings {
    color: var(--spColorBlue);
}
.spRoundButtonWithTextIcon {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 600;
}
.spLogSyncResultCheckbox {
    flex-direction: row; justify-content: flex-start; align-items: center;
    row-gap: 5px; column-gap: 5px;
}
.spLogSyncResultCheckbox input[type="checkbox"] {
    min-width: 16px;
    min-height: 16px;
}
.spContainerSeveralColumns {
    flex-direction: row; align-items: flex-start; flex-wrap: wrap;
    width: 100%; column-gap: 40px; row-gap: 20px;
}
.spContainerColumn {
    flex-direction: column; justify-content: flex-start; align-items: flex-start;
    max-width: 450px; min-width: 350px; width: 400px; flex-grow: 1;
    row-gap: 5px; column-gap: 10px;
}
.spSyncPageLinkBlock {
    flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
    column-gap: 4px;
}
.spSyncPageLinkSpan { text-align: left; opacity: 0.7; cursor: pointer; text-decoration: underline; font-weight: 600; }
.spSyncPageLinkSpan:hover { opacity: 1; }
.spSyncLinkComm { font-size: small; font-weight: 200; }
.spSyncPageMiniHeader { font-weight: 600; text-align: left; margin-bottom: 5px; font-size: 15.5px; }
.spSyncSummaryInfoBlock {
    justify-content: flex-start;
    align-items: center;
    column-gap: 5px; row-gap: 5px;
}
.spSSIBTT {
    font-weight: 600;
    text-decoration: underline;
}
.spComboColumn, .spComboBlock { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.spComboColumn { row-gap: 15px; column-gap: 15px; flex-basis: 100px; flex-grow: 1; }
.spComboBlock { width: 100%; }
.spComboBlock select { width: 100%; max-width: 300px; }
.spComboName { font-size: 90%; font-weight: 500; margin-bottom: 5px; }
.spResultTable td { padding: 1px 5px; border: 1px solid grey; }
.spResultTable a { text-decoration: underline; color: blue; }
.spResultTable a:visited { color: violet; }
#logContainer {
    flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left;
    width: 100%; max-width: 96vw;
    background-color: var(--spColorGreyDark); row-gap: 1px; padding: 1px;
}
#logContainer>div {
    flex-direction: row; justify-content: flex-start; text-align: left; flex-wrap: wrap;
    width: 100%;
    row-gap: 1px; column-gap: 1px;
}
#logContainer>div:first-child>div { background-color: var(--spColorLightGrey2); }
#logContainer>div>div {
    align-self: stretch; flex-grow: 0.5;
    box-sizing: border-box; word-break: break-word;
    padding: 5px 5px;
}
#logContainer>div>div:nth-child(1) { width: 100px; }
#logContainer>div>div:nth-child(2) { width: 160px; }
#logContainer>div>div:nth-child(3) { width: 220px; flex-grow: 2; }
#logContainer>div>div:nth-child(4) { width: 185px; }
#logContainer>div>div:nth-child(5) { width: 120px; }
#logContainer>div>div:nth-child(6) { width: 60px; }
#logContainer>div>div:nth-child(7) { width: 90%; flex-grow: 1; }
#logContainer>div>div:nth-child(8) { width: 90%; flex-grow: 1; }