@import '../layout_v4/_components.css';
@import '../layout_v4/base/_defaults.css';

@font-face {
    font-family : FixedWidth;
    src         : url('../../fonts/AlmaMono-Regular.ttf');
}

.boxContainer {
    margin  : 1.25rem 0;
    display : grid;
    gap     : 0 var(--default-box-gap);
}

.boxContainer.onethird {
    grid-template-columns : 1fr 2fr;
}

.box.newItem.normalBorder {
    border-width : 0;
}

.boxContainer.twothird {
    grid-template-columns : 2fr 1fr;
}

select {
    background-image : unset !important;
}

input[type=submit],
input[type=button],
button {
    border-radius : unset !important;
}

.formNavigation {
    text-align : right;
}

.formNavigation input,
.formNavigation button {
    vertical-align : middle;
}

.gridContainer {
    display : grid;
}

.formContainer.half:not(table),
.formContainer.twothird:not(table),
.gridContainer.twothird:not(table),
.gridContainer.half:not(table),
.formContainer.onethird:not(table),
.gridContainer.onethird:not(table) {
    align-items : center;
    display     : grid;
    grid-gap    : 0.5rem 2rem;
}

.gridContainer.g2,
.gridContainer.g3,
.gridContainer.g4,
.gridContainer.g5 {
    grid-gap : 0.5rem 1rem;
}

.gridContainer.g2 .hr {
    grid-column : 1 / span 2;
}

.gridContainer.g3 .hr {
    grid-column : 1 / span 3;
}

.gridContainer.g4 .hr {
    grid-column : 1 / span 4;
}

.gridContainer.g5 .hr {
    grid-column : 1 / span 5;
}


.gridContainer.g2,
.boxContainer.b2 {
    grid-template-columns : repeat(2, 1fr);
}

.gridContainer.g3,
.boxContainer.b3 {
    grid-template-columns : repeat(3, 1fr);
}

.gridContainer.g4,
.boxContainer.b4 {
    grid-template-columns : repeat(4, 1fr);
}

.gridContainer.g5,
.boxContainer.b5 {
    grid-template-columns : repeat(4, 1fr);
}

.formContainer.baseline,
.gridContainer.baseline {
    align-items : baseline;
}

.formContainer.start,
.gridContainer.start {
    align-items : flex-start !important;
}

.formContainer.start,
.boxContainer.start {
    align-items : start;
}

.boxContainer.middle .box {
    align-content : center;
    display       : grid;
}

.box .investContainer > div,
.box .blocksContainer > div,
.box .boxFormListContainer > div,
.box .deliveryBarContainer > div {
    display               : grid;
    grid-template-columns : 1fr 3fr;
    grid-column-gap       : 0.5rem;
    border-bottom         : 1px solid var(--line-color);
    padding               : 0.5rem 0;
    align-items           : center;
    line-height           : 1rem;
}


.box.success.grid,
.box.error.grid,
.box.infobox.grid,
.box.warning.grid {
    display               : grid;
    align-items           : center;
    grid-template-columns : auto;
    grid-column-gap       : 1rem;
}

.box.middle {
    align-content : center;
}

.formContainer.half,
.gridContainer.half {
    grid-template-columns : 1fr 1fr;
}

.formContainer.twothird,
.gridContainer.twothird,
.box .gridData.twothird div {
    grid-template-columns : 2.2fr 1fr;
}

.formContainer .row {
    grid-template-rows : auto auto;
}


.formContainer.fullWidth,
.gridContainer.fullWidth,
.box .gridData div.fullGrid {
    grid-template-columns : 1fr;
}

.formContainer.onethird,
.gridContainer.onethird {
    grid-template-columns : 1fr 2.2fr;
}

.formContainer.twothird .row {
    grid-auto-flow        : unset;
    grid-template-columns : 1fr 1fr;
}

.formContainer .row.r1 {
    grid-template-columns : 1fr;
}

.formContainer .row.r2 {
    grid-template-columns : 1fr 1fr;
}

.formContainer .row.r2.baseline {
    align-items : baseline;
}

.formContainer .row.r3 {
    grid-template-columns : 1fr 1fr 1fr;
}

.formContainer .row.onethird {
    grid-template-columns : 1fr 2fr;
}

.formContainer.auto .row {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
}


.formContainer .row {
    gap     : 1.25rem;
    grid    : auto-flow / auto 1fr;
    display : grid;
}

.formContainer .row.r1 {
    grid-template-columns : 1fr;
}

.formContainer .row.r2 {
    grid-template-columns : 1fr 1fr;
}

.formContainer .row > div:not(.input-group) {
    display            : grid;
    grid-row           : span 2;
    grid-template-rows : subgrid;
}

.formContainer .row > div > label {
    align-content      : space-between;
    display            : grid;
    grid-row-gap       : 0.5rem;
    grid-template-rows : auto auto;
    height             : 100%;
}

.boxContainer.b2, .boxContainer.half {
    grid-template-columns : 1fr 1fr;
}

.box:not(.gm-select):not(.gm-checkbox):not(.gm-autocomplete-options):not(.gm-select-options):not(.success):not(.warning):not(.errorBox):not(.infobox) {
    background    : var(--bg-color-40);
    padding       : var(--default-box-padding);
    border-radius : var(--default-border-radius);
    box-shadow    : var(--box-shadow);
    box-sizing    : border-box;
    position      : relative;
    margin-bottom : var(--default-box-gap);
}


.box.selected:not(.gm-select):not(.gm-select-options):not(.success):not(.warning):not(.errorBox):not(.infobox) {
    background-image : linear-gradient(
        to right, var(--green-color) 0%,
        var(--green-color) 9px,
        var(--bg-color-40) 10px,
        var(--bg-color-40) 100%);
}

.box.newItem {
    border-style  : dashed;
    border-width  : 2px;
    border-color  : var(--box-border-color);
    transition    : background-color 300ms ease;
    cursor        : pointer;
}

.box.newItem:hover {
    background-color : var(--box-hover-bg-color) !important;
}

.box.infobox {
    background : linear-gradient(
        to bottom,
        var(--blue-light-color) 0%,
        var(--blue-light-color) calc(100% - 8px),
        var(--blue-color) calc(100% - 7px),
        var(--blue-color) 100%
    ) !important;
    border     : 1px solid var(--blue-color);
    padding    : var(--default-box-padding) var(--default-box-padding) 24px var(--default-box-padding);
}

.box.success svg.roundTick {
    display : none;
}


.box.infobox .icon {
    fill         : var(--blue-color);
    margin-right : 10px;
}

main .input-group,
main .input-group.dark {
    border-radius : 0;
    box-shadow    : none;
    background    : #fff;
    border        : 1px solid #d5d5d5;
    line-height   : initial;
    position      : relative;
    align-items   : center;
    display       : flex;
}


main .input-group input,
main .input-group select,
main .input-group span {
    background : transparent !important;
    border     : 0;
    flex       : 1 1 auto;
    width      : 100%;
    height     : 100%;
    padding    : 0 4px;
}

main .input-group input:focus,
main .input-group select:focus,
main .input-group select:focus,
main .input-group span:focus {
    box-shadow : none;
}

main .input-group:focus-within {
    /* TODO */
}

main .input-group .input-prepend,
main .input-group .input-append {
    white-space : nowrap;
}


main .input-group input[type=number] {
    -moz-appearance : textfield;
}

main .input-group,
main .boxFormListContainer .input-group {
    justify-content : unset;
    
    .input-prepend {
        padding-left : 6px;
    }
    
    .numericInputWrapper,
    input {
        width  : 100%;
        height : auto;
        
        
        &.disabled {
            background-color : #e5e5e5 !important;
        }
        
        &::-webkit-inner-spin-button {
            -webkit-appearance : none;
        }
    }
    
    &.disabled {
        background-color : #e5e5e5 !important;
    }
}


.providerStats .box.selected {
    background-image : linear-gradient(
        to right,
        var(--green-color) 0%,
        var(--green-color) 9px,
        var(--bg-color-40) 10px,
        var(--bg-color-40) 100%
    );
}

.box .investContainer > div, .box .blocksContainer > div, .box .boxFormListContainer > div {
    display     : grid;
    padding     : 0.5rem 0;
    align-items : center;
    line-height : 1rem;
    text-align  : right;
}

.box input[type=text],
.box input[type=email],
.box input[type=date],
.box input[type=tel],
.box select,
.box textarea {
    background-color : var(--light-text-color) !important;
}


.boxFormListContainer.providerStatsList .head, .boxFormListContainer.providerStatsList > div:not(.hr),
.boxFormListContainer.buyOrSell .head, .boxFormListContainer.buyOrSell > div {
    font-size : 0.9rem;
}

.boxContainer .box h3 span.text {
    display        : flex;
    flex-direction : column;
}

.boxContainer .box h3 > svg {
    margin-right : 1rem;
}

.boxContainer .box h3.left {
    justify-content : start;
}

.boxContainer .box h3 {
    align-items     : center;
    display         : flex;
    font-size       : 1.4em;
    font-weight     : 500;
    justify-content : center;
    text-transform  : uppercase;
    margin-bottom   : 2rem;
}

.boxContainer .box h3 span.text i {
    font-size : 1rem;
}

.providerStats h3 .marketMakerPrice {
    font-size : 0.9rem;
}

.box .investContainer .head, .box .blocksContainer .head, .box .boxFormListContainer .head {
    font-weight : 600;
}

input[type='range']:focus {
    box-shadow : none;
    border     : 0;
    
}

input[type='range']::-moz-range-thumb {
    transform : scale(2) !important;
}

input[type='range'] {
    border              : 0;
    padding             : 0;
    --range-line-height : 3px;
    border-radius       : 3px;
    width               : 100%;
    height              : var(--range-line-height);
}

input[type='range']:focus {
    border : 0;
}

.box.newItem,
.prices .box.newItem {
    align-content      : center;
    border-color       : var(--box-border-color);
    border-style       : dashed;
    border-width       : 2px;
    color              : var(--body-text-color);
    display            : grid;
    font-size          : 1rem;
    grid-template-rows : unset;
    justify-content    : center;
    line-height        : unset;
    transition         : background-color 300ms ease;
    cursor             : pointer;
    
    &:hover {
        background-color : var(--bg-color-60);
        
        .dark & {
            background-color : var(--box-hover-bg-color);
        }
        
        span {
            span, svg {
                transform : scale(1.1);
            }
        }
    }
    
    span {
        display         : grid;
        grid-auto-flow  : row;
        justify-content : center;
        justify-items   : center;
        
        
        span, svg {
            font-size     : 10rem;
            font-weight   : 700;
            line-height   : 5.1rem;
            margin-bottom : 2rem;
            transition    : transform 100ms ease-in;
            
            
        }
    }
}

.box .investContainer,
.box .blocksContainer,
.box .boxFormListContainer,
.box .deliveryBarContainer {
    margin    : 0 2rem;
    font-size : 1rem;
}

.box .deliverySummary > div,
.box.investSummaryTable {
    font-size   : 1rem;
    line-height : 2rem;
}


.box .investContainer .head,
.box .blocksContainer .head,
.box .boxFormListContainer .head,
.box .deliveryBarContainer .head {
    font-weight   : 600;
    border-bottom : 0;
}

.box .investContainer .head *:first-letter,
.box .blocksContainer .head *:first-letter,
.box .boxFormListContainer .head *:first-letter {
    text-transform : uppercase;
}

.box .investContainer > div,
.box .blocksContainer > div,
.box .boxFormListContainer > div,
.box .deliveryBarContainer > div {
    display               : grid;
    grid-template-columns : 1fr 3fr;
    grid-column-gap       : 0.5rem;
    border-bottom         : 1px solid var(--line-color);
    padding               : 0.5rem 0;
    align-items           : center;
    line-height           : 1rem;
}

.box .investContainer > div:not(.head),
.box .blocksContainer > div:not(.head),
.box .boxFormListContainer > div:not(.head),
.box .deliveryBarContainer > div:not(.head) {
    white-space : nowrap;
}

.box .investContainer.third > div,
.box .blocksContainer.third > div,
.box .boxFormListContainer.third > div {
    grid-template-columns : 1fr 2fr 2fr;
}

.box .investContainer > div > *,
.box .blocksContainer > div > *,
.box .boxFormListContainer > div > *,
.box .deliveryBarContainer > div > * {
    text-align : right;
}

.box .investContainer .head *.center,
.box .blocksContainer .head *.center,
.box .boxFormListContainer .head *.center {
    text-align : center;
}

.box .investContainer > div i,
.box .blocksContainer > div i,
.box .boxFormListContainer > div i,
.box .deliveryBarContainer > div i {
    font-weight : 200;
    font-size   : 0.8rem;
    display     : block;
}

.box .investContainer > div .quantity,
.box .blocksContainer > div .quantity,
.box .boxFormListContainer > div .quantity {
    font-weight : 600;
}

.box .investContainer > div .quantity.center,
.box .blocksContainer > div .quantity.center,
.box .boxFormListContainer > div.quantity.center {
    text-align : center;
}

.box .investContainer > div .quantity input,
.box .blocksContainer > div .quantity input,
.box .boxFormListContainer > div.quantity input {
    padding   : 0.5rem;
    width     : 4rem;
    font-size : 0.8rem;
}

.box .investContainer > div:last-child,
.box .investContainer .head,
.box .blocksContainer > div:last-child,
.box .blocksContainer .head,
.box .boxFormListContainer > div:last-child,
.box .boxFormListContainer .head,
.box .deliveryBarContainer .head,
.box .deliveryBarContainer > div:last-child {
    border-bottom : 0;
}

.box .deliveryBarContainer > div:last-child i {
    font-size : 0.8rem;
}

.box .investContainer .sum,
.box .investContainer.third .sum,
.box .blocksContainer .sum,
.box .blocksContainer.third .sum,
.box .boxFormListContainer .sum,
.box .boxFormListContainer.third .sum {
    grid-template-columns : 1fr 3fr;
    font-weight           : 600;
    margin-top            : 1rem;
    font-size             : 1rem;
}

.box .investContainer .sum div:first-child,
.box .blocksContainer .sum div:first-child,
.box .boxFormListContainer .sum div:first-child {
    text-align : left;
}


.investSummary,
.spareplanSummary {
    font-size : 0.9rem;
}

.investSummary .hr,
.spareplanSummary .hr {
    margin : 0.5rem 0;
}

.investSummary > div:not(.hr):not(.center):not(.notGrid):not(.investSummaryContainer),
.investSummary .investSummaryContainer > div:not(.hr):not(.center):not(.notGrid),
.spareplanSummary > div:not(.hr):not(.center):not(.notGrid):not(.spareplanSummaryContainer),
.spareplanSummary .spareplanSummaryContainer > div:not(.hr):not(.center):not(.notGrid) {
    display               : grid;
    grid-template-columns : 2fr 1fr;
    margin                : 0.5rem 0;
}

.investSummary > div.split3:not(.hr):not(.center):not(.notGrid):not(.investSummaryContainer),
.spareplanSummary > div.split3:not(.hr):not(.center):not(.notGrid):not(.spareplanSummaryContainer) {
    grid-template-columns : 1.5fr 0.5fr 0.5fr;
}

.spareplanSummary > div.split4:not(.hr):not(.center):not(.notGrid):not(.spareplanSummaryContainer) {
    grid-template-columns : 1fr 0.5fr 0.5fr 0.5fr;
}

.investSummary .investSummaryContainer,
.spareplanSummary .spareplanSummary {
    margin-top : 2rem;
}

.investSummary div:not(.hr):not(.center):not(.notGrid):not(.investSummaryContainer) *:last-child,
.investSummary .investSummaryContainer > div:not(.hr):not(.center):not(.notGrid) *:last-child,
.spareplanSummary div:not(.hr):not(.center):not(.notGrid):not(.spareplanSummaryContainer) *:last-child,
.spareplanSummary .spareplanSummaryContainer > div:not(.hr):not(.center):not(.notGrid) *:last-child {
    text-align : right;
}

.spareplanSummary div.split3 *:nth-child(2) {
    text-align    : right;
    padding-right : 2rem;
}

.spareplanSummary div.split4 *:nth-child(2),
.spareplanSummary div.split4 *:nth-child(3) {
    text-align    : right;
    padding-right : 2rem;
    white-space   : nowrap;
}

.investSummary div.biggerRow,
.spareplanSummary div.biggerRow,
.sparePlan-summaryTable .biggerRow {
    font-size   : 1rem;
    font-weight : 600;
}

.investSummary div.biggestRow,
.spareplanSummary div.biggestRow,
.sparePlan-summaryTable .biggestRow {
    font-size   : 1.3rem;
    font-weight : 600;
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio : 0) {
    input[type='range'] {
        -webkit-appearance : none;
        background-color   : var(--bg-color-100);
        background-image   : linear-gradient(var(--blue-color), var(--blue-color));
        background-repeat  : no-repeat;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height             : var(--range-line-height);
        -webkit-appearance : none;
        color              : var(--blue-color);
    }
    
    input[type='range']::-webkit-slider-thumb {
        width              : 12px;
        -webkit-appearance : none;
        height             : 12px;
        border-radius      : 50%;
        cursor             : ew-resize;
        background         : var(--blue-color);
        margin-top         : -4px;
        transform          : scale(2);
        background-clip    : padding-box;
        border             : 0.3rem solid transparent;
    }
    
    input[type='range']:disabled::-webkit-slider-thumb {
        cursor : default;
    }
    
}

/** FF*/
input[type='range']::-moz-range-progress {
    background-color  : var(--bg-color-100);
    background-image  : linear-gradient(var(--blue-color), var(--blue-color));
    background-repeat : no-repeat;
    
}

input[type='range']::-moz-range-thumb {
    width           : 12px;
    height          : 12px;
    border-radius   : 50%;
    cursor          : ew-resize;
    background      : var(--blue-color);
    margin-top      : -4px;
    transform       : scale(3);
    background-clip : padding-box;
    border          : 0.3rem solid transparent;
    box-sizing      : border-box;
}

input[type='range']:disabled::-moz-range-thumb {
    cursor : default;
}

/* IE*/
input[type='range']::-ms-fill-lower {
    background-color : var(--blue-color);
}

input[type='range']::-ms-fill-upper {
    background-color : var(--bg-color-100);
}

.tradingMarket .supplierSelect .gm-select {
    width : 250px;
}

.tradingCounter {
    text-align : center !important;;
}

.box .investContainer .sum,
.box .investContainer.third .sum,
.box .blocksContainer .sum,
.box .blocksContainer.third .sum,
.box .boxFormListContainer .sum,
.box .boxFormListContainer.third .sum {
    font-weight : 600;
}

.checkDialog,
.checkDialog .gridContainer,
.checkDialog .gridContainer.g4 {
    font-size : 1.1rem;
}

.checkDialog .info i {
    font-size : 1rem;
}

a.notText {
    text-decoration : none;
    border-bottom   : 0;
}

.preloader {
    height         : var(--size);
    width          : var(--size);
    visibility     : hidden;
    vertical-align : middle;
    display        : inline-block;
}

.preloader.white {
}

.preloader.show {
    visibility : visible;
    display    : inline-block !important;
}

.preloader.p40 {
    --size : 40;
}

.hide {
    display : none !important;
}

.preloader {
    --size             : 1.25rem;
    display            : inline-block;
    width              : var(--size);
    height             : var(--size);
    border-radius      : 50%;
    box-sizing         : border-box;
    -webkit-mask-image : none;
    mask-image         : none;
    background         : transparent;
    border             : calc(var(--size) / 6) solid var(--blue-color);
    clip-path          : polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    animation          : 1.6s goPreloader linear infinite;
}


.preloader {
    height         : var(--size);
    width          : var(--size);
    visibility     : hidden;
    vertical-align : middle;
    display        : inline-block;
}

.preloader.white {
    background-image : url('../../images/layout_v4/rolling_white.svg');
}

.preloader.show {
    visibility : visible;
    display    : inline-block !important;
}

.preloader.p40 {
    --size : 40;
}

.input-group {
    position : relative;
}

.input-group .box.infobox {
    align-items           : center;
    box-shadow            : 5px 5px 5px rgba(0, 0, 0, 0.1);
    display               : grid;
    font-size             : 0.9rem;
    grid-template-columns : auto 1fr;
    left                  : calc(100% + 1.25rem);
    min-width             : 250px;
    position              : absolute;
    top                   : 50%;
    transform             : translate(0, -50%);
    z-index               : var(--z-index-infoboxTooltip);
}

.input-group .box.infobox.errorPopup {
    display : block;
}

.input-group .box.infobox.errorPopup svg {
    fill : var(--light-text-color);
}

.input-group .box.infobox::before {
    border-bottom : 8px solid transparent;
    border-right  : 8px solid var(--blue-light-color);
    border-top    : 8px solid transparent;
    content       : '';
    display       : block;
    height        : 0;
    left          : -7px;
    position      : absolute;
    top           : 50%;
    transform     : translate(0, -50%);
    width         : 0;
    z-index       : var(--z-index-infoboxTooltip);
}

.input-group .box.infobox::after {
    border-bottom : 9px solid transparent;
    border-right  : 9px solid var(--blue-color);
    border-top    : 9px solid transparent;
    content       : '';
    display       : block;
    height        : 0;
    left          : -9px;
    position      : absolute;
    top           : 50%;
    transform     : translate(0, -50%);
    width         : 0;
    z-index       : var(--z-index-infoboxTooltipArrow);
}

.input-group.error {
    color  : #960b0b;
    border : 1px solid var(--error-border-color);
}

.input-group .box.errorPopup::before,
.input-group .box.errorPopup::after {
    border-right-color : var(--box-error-line-bg-color) !important;
}

.box.infobox {
    font-size : 1rem;
}

.box.infobox.errorPopup {
    background : var(--box-error-line-bg-color) !important;
    border     : 1px solid var(--box-error-line-bg-color);
    color      : var(--light-text-color);
}

.box.infobox.errorPopup .mask {
    background : var(--light-text-color);
}

.box.infobox.errorPopup .hr {
    border-bottom : 1px solid var(--box-error-hr-color);
    margin-bottom : 0.5rem;
}

.input-group .box.infobox .infoText {
    display               : grid;
    grid-template-columns : 32px auto;
    grid-column-gap       : 0.5rem;
    align-items           : center;
}

.allowCheckboxes {
    user-select  : none;
    display      : grid;
    grid-row-gap : 1rem;
    margin-top   : 2rem;
}


label.modernRadio input[type='checkbox'] + span.disabled,
label.modernRadio.disabled {
    opacity : 0.5;
}

.allowCheckboxes.smaller label.modernRadio input {
    display : none;
}

.allowCheckboxes.smaller label.modernRadio input[type=radio] + span,
.allowCheckboxes.smaller label.modernRadio input[type=checkbox] + span {
    transform : scale(0.5);
    margin    : 0;
}

label.modernRadio:not(.disabled) input[type='radio']:disabled + span,
label.modernRadio:not(.disabled) input[type='checkbox']:disabled + span {
    opacity : 0.5;
    cursor: default;
}


.allowCheckboxes label {
    font-size             : 13px;
    align-items           : center;
    display               : grid;
    grid-gap              : 2rem;
    grid-template-columns : 30px auto;
}

.allowCheckboxes label a {
    border-bottom : 0;
}

.allowCheckboxes.middle {
    align-items : center;
}

.allowCheckboxes.smaller {
    grid-row-gap : 0.1rem;
}


.gm-select .bankChooser {
    display         : flex;
    align-items     : center;
    grid-column-gap : 0.5rem;
}

.gm-select .bankChooser img {
    width : 40px;
    /*border-radius : var(--default-border-radius);*/
}

.gm-select .bankChooser i {
    font-size   : 0.8rem;
    font-style  : normal;
    font-weight : 300;
}

.boxClipart {
    transition : width 0.3s ease-in-out;
    width      : 90%;
    margin     : 1rem 0 2rem 0;
}

.boxClipart.w70 {
    width : 70%;
}

.boxClipart.w60 {
    width : 60%;
}

.boxClipart.w50 {
    width : 50%;
}

.boxClipart.w40 {
    width : 40%;
}

.boxClipart.w30 {
    width : 30%;
}

.hr {
    border-bottom : 1px solid var(--line-color);
    margin        : 1.2rem 0;
}

footer .box {
    padding       : 0 0 0 40px !important;
    background    : transparent !important;
    box-shadow    : none !important;
    border-radius : 0 !important;
}

button svg.icon {
    fill : var(--light-text-color);
}

button.red {
    background-color : var(--red-color);
}

.box .investContainer > div, .box .blocksContainer > div,
.box .boxFormListContainer > div {
    border-bottom : 1px solid var(--line-color);
}

.box .investContainer > div:last-child,
.box .investContainer .head,
.box .blocksContainer > div:last-child,
.box .blocksContainer .head,
.box .boxFormListContainer > div:last-child,
.box .boxFormListContainer .head {
    border-bottom : 0;
}

.boxFormListContainer .input-group {
    display : flex;
}

.box .investContainer > div i, .box .blocksContainer > div i, .box .boxFormListContainer > div i {
    font-weight : 200;
    font-size   : 0.9rem;
    display     : block;
}

.boxFormListContainer.moveForm .head, .boxFormListContainer.moveForm > div {
    font-size : 0.9rem;
}

.boxFormListContainer.moveDeliveryStat .head, .boxFormListContainer.moveDeliveryStat > div {
    font-size : 1rem;
}

.boxContainer .box h3 span.text {
    line-height : 2rem;
}

.formContainer .row {
    display    : grid;
    column-gap : 1.25rem;
    row-gap    : 0.3rem;
    grid       : auto-flow / auto 1fr;
    margin     : 2rem 0;
}

.formContainer .row.twothird {
    grid-template-columns : 2fr 1fr;
}

.formContainer input:not([type=range]) {
    /** Elrontott input magasság miatt szedtem ki */
    /* min-height : 100%;*/
}

.gm-dialog input,
.gm-dialog select,
.gm-dialog textarea {
    width : 100%;
}

.gm-dialog .input-group {
    display        : flex;
    padding-block  : 1px;
    padding-inline : 2px;
}

.gm-dialog input,
.gm-dialog select,
.gm-dialog textarea {
    height     : 30px;
    border     : 1px solid #e5e5e5;
    padding    : 0 4px;
    box-sizing : border-box;
}

.gm-dialog .input-group input {
    border : 0;
}

.fflag {
    width  : 24px;
    height : 18px;
}

.icon.blue {
    fill : var(--blue-color);
}

.state {
    width         : 1rem;
    height        : 1rem;
    margin-right  : 0.3rem;
    display       : inline-grid;
    place-content : center;
}

.state{
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.state::before,
.state {
    grid-area : 1 / 1 / 2 / 2;
}

.state {
    width         : 1rem;
    height        : 1rem;
    margin-right  : 0.3rem;
    display       : inline-grid;
    place-content : center;
    
    &::before {
        border-radius : 50%;
        display       : inline-grid;
        content       : '';
        height        : 0.5rem;
        width         : 0.5rem;
    }
    
    &.smaller {
        width        : 0.45rem;
        height       : 0.45rem;
        margin-right : 0.1rem;
        
        &::before {
            height : 0.45rem;
            width  : 0.45rem;
        }
    }
}

.state::before,
.state {
    grid-area : 1 / 1 / 2 / 2;
}

.state.success::before,
.state.active::before,
.state.green::before {
    background-color : var(--green-color);
}

.state.error::before,
.state.inactive::before {
    background-color : var(--error-color);
}

.state.warning::before,
.state.orange::before {
    background-color : var(--orange-color);
}

.state::before {
    border-radius : 50%;
    display       : inline-grid;
    content       : '';
    height        : 0.6rem;
    width         : 0.6rem;
}

.box.alert {
    background-color : var(--box-alert-bg-color) !important;
    border           : 1px solid var(--box-alert-border-color) !important;
    box-shadow       : none !important;
    margin-bottom    : 20px;
}


.box {
    .input-group,
    input[type='text'],
    textarea {
        width : 100%;
    }
    
    &.sticky{
        position: sticky !important;
    }
}

.boxContainer h3 {
    background : none !important;
}

input.error {
    border : 1px solid var(--error-border-color);
}

.input-group {
    border-radius : unset;
}

.bank-box {
    display     : flex;
    column-gap  : 1rem;
    margin-top  : 1rem;
    align-items : center;
    
    .image {
        flex-shrink     : 0;
        width           : 5rem;
        height          : 5rem;
        border-radius   : var(--default-border-radius);
        overflow        : hidden;
        border          : 1px solid var(--line-color);
        display         : flex;
        align-items     : center;
        justify-content : center;
        
        img {
            max-width : 100%;
        }
    }
}

.pie {
    position     : relative;
    display      : inline-block;
    --size       : 40px;
    --border     : 4px;
    --percent    : 0;
    --counter    : 0;
    --r          : calc((var(--size) / 2) - (var(--border) / 2));
    --dash-array : calc(var(--r) * 2 * 3.14);
    height       : var(--size);
    width        : var(--size);
}

.pie span {
    height      : 100%;
    width       : 100%;
    text-align  : center;
    align-items : center;
    z-index     : 2;
    color       : var(--body-text-color);
    position    : absolute;
    font-size   : calc(var(--size) / 4);
    font-weight : 700;
    display     : grid;
}

.pie span::after {
    --counter     : var(--percent);
    counter-reset : variable var(--counter);
    content       : counter(variable) '%';
    display       : block;
    animation     : spinText 1100ms ease;
}

.pie svg {
    width     : var(--size);
    height    : var(--size);
    transform : rotateZ(-90deg);
}

.pie svg circle {
    r                : var(--r);
    stroke-dasharray : var(--dash-array);
    stroke-linecap   : butt;
    stroke-width     : var(--border);
    stroke           : var(--green-color);
    fill             : none;
}

.pie svg circle.bg {
    stroke : var(--line-color);
}

.pie svg circle.line {
    animation         : spinSvg 600ms ease backwards;
    animation-delay   : 0.5s;
    stroke-dashoffset : calc(var(--dash-array) / 100 * (100 - var(--percent)));
}

div.list.contentEditList .body > .data {
    font-size : 1rem;
}

div.list {
    a{
        text-decoration : none;
        border-bottom: 0;
        font-weight: normal;
    }
}

.box {
    a{
        border-bottom: 0;
    }
}

.content a:has(svg), .content a:has(img) {
    border-bottom : 0;
}

.prices {
    grid-auto-rows : 1fr;
    grid-row-gap   : var(--default-box-gap);
}


.prices h3 {
    font-size  : 1rem;
    text-align : center;
}


.prices h4 {
    font-size     : 1rem;
    font-weight   : 500;
    margin-bottom : 1rem;
    text-align    : center;
}

.prices.b3 {
    font-size : 0.8em;
}

.prices.b3 .box {
    display            : grid;
    grid-row-gap       : 1rem;
    grid-template-rows : auto 2.5rem;
}

.prices.b3 .box.delivery {
    grid-template-rows : unset;
}

.prices.b3 .box.rightPrice .boxWrapper {
    align-content      : space-between;
    display            : grid;
    grid-template-rows : auto auto auto;
}

.prices.b3 button {
    width : 100%;
}

.logged .prices.b3,
.gm-dialog .prices {
    font-size : 0.9em;
}

.logged .prices.b3 {
    grid-template-columns : 1fr 1fr 1fr;
}

.prices .priceWrapper {
    margin-bottom : 1rem;
    white-space   : nowrap;
}

.prices .invest h3 > * {
    display : flex;
}

.prices.b3 .box {
    margin-bottom : 0;
    display       : flex;
}

.prices .invest .priceWrapper,
.prices .rightPrice .priceWrapper {
    display         : grid;
    justify-content : center;
    width           : auto;
}

.prices .rightPrice .priceWrapper {
    white-space : normal;
}

.prices .invest.silver .priceContainer,
.prices .rightPrice .priceContainer {
    display : inline-block;
}

.prices .priceContainer .inactiveBonus {
    opacity : 0.5;
}

.prices .invest.gold .priceContainer,
.prices .invest.gold .priceContainer {
    column-gap        : 1.4rem;
    column-rule-color : var(--box-border-color);
    column-rule-style : solid;
    column-rule-width : 1px;
    columns           : 2;
    margin-right      : 1.2rem;
}

.prices .item > .summarize > div,
.prices .priceContainer .summarize {
    display               : grid;
    font-weight           : 600;
    grid-row-gap          : 0.2rem;
    grid-template-columns : 1fr 1fr;
    margin                : 1rem 0 0 0;
}

.prices .item > .summarize > div.grid-colspan2 {
    grid-template-columns : 1fr;
}

.prices .lockSmaller {
    font-size    : 0.9rem;
    padding-left : 1rem;
}


.prices .item > .summarize + a {
    margin-top : 1rem;
}

.prices .box .item {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    width          : 100%;
}

.prices .priceWrapper {
    flex-grow : 1;
}

.prices .item > .summarize {
    flex-grow : 1;
}

.prices .priceContainer .summarize {
    font-weight : 400;
}

.prices.bonusLock .priceContainer .summarize,
.prices.bonusLock .item > .summarize > div {
    font-weight : 500 !important;
}

.prices .item > .summarize div > div:nth-child(even),
.prices .priceContainer > .summarize div:nth-child(even) {
    text-align : right;
}

.prices .invest .priceContainer .price,
.prices .rightPrice .priceContainer .price {
    display               : grid;
    grid-column-gap       : 1.2rem;
    grid-template-columns : 1.5fr 2fr;
    line-height           : 1.6rem;
    text-align            : right;
}

.prices .rightPrice .priceContainer .price .info {
    display     : block;
    font-size   : 0.9rem;
    font-weight : 200;
    font-style  : italic;
}

.prices .invest.gold .priceContainer .price:nth-child(-n+5) {
    margin-right : 1rem;
}

.prices .invest.silver .priceContainer .price div:nth-child(odd) {
    padding-right : 4rem;
}

.prices .spareplan .priceWrapper {
    align-content : center;
    display       : grid;
    height        : calc(100% - 5rem);
}

.prices .spareplan .price {
    display               : grid;
    grid-template-columns : auto auto;
    line-height           : 2rem;
}

.prices .box.rightPrice {
    grid-template-rows : auto;
}

.prices .rightPrice.silver .price {
    grid-template-columns : 1fr 1fr 1fr;
    margin-right          : 2rem;
}

.prices .rightPrice .price {
    display         : grid;
    grid-column-gap : 0.8rem;
    text-align      : center;
}

.prices .box.buyRateTable .priceHead,
.prices .box.buyRateTable .price {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    text-align            : center;
}

.prices .box.quantityTable .priceHead,
.prices .box.quantityTable .price {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    text-align            : center;
}


.prices .box.buyRateTable .priceHead > *:nth-child(1),
.prices .box.buyRateTable .price > *:nth-child(1),
.prices .box.quantityTable .priceHead > *:nth-child(1),
.prices .box.quantityTable .price > *:nth-child(1),
.prices .box.buyRateTable .priceHead > *:nth-child(3),
.prices .box.buyRateTable .price > *:nth-child(3) {
    text-align    : right;
    padding-right : 2.2rem;
}


.prices .spareplan .price div:last-child {
    text-align : right;
}

.prices .rightPrice .price.head {
    font-weight    : 500;
    margin-bottom  : 1rem;
    text-transform : capitalize;
}

.box.errorContent {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-column-gap       : 2rem;
    align-items           : center;
}

.fflag,
.fflag-24{
    height : 1.125rem;
    width  : 1.5rem;
}

.fflag.fflag-20{
    height : 0.937rem;
    width: 1.25rem;
}

.fflag.fflag-16{
    height : 0.75rem;
    width: 1rem;
}