* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 11pt;
    overflow: hidden;
}

h4, p {
    padding: 5px;
    line-height: 1.5em;
}

h1, h4 {
    align-self: center;
    position: relative;
    cursor: default;
    user-select: none;
    z-index: 1;
}

.Title {
    background: url('img/distressed_texture_in_purple_background.jpg') fixed, #bfe8ff;
    mix-blend-mode: darken;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
    color: #e7820e;
    border-bottom: 2px solid #71aaca;
}

.FlexMain {
    min-height: calc(100% - 46px);
    width: 100%;
    background: url('img/messy-wall-stucco-texture-background.jpg') fixed;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
}

.FlexArea {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0;
}

.Flex1 {
    flex-direction: column;
    flex: 11;
}

.Flex2 {
    flex-direction: column;
    flex: 6;
}

.Flex3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 7;
}

.Flex3-1 {
    display: flex;
    flex-direction: column;
    flex: 3;
}

.Flex3-1-1 {
    padding-bottom: 0;
    flex-direction: column;
    flex: 1;
}

.Flex3-1-2 {
    flex: 1;
}

.Flex3-2 {
    flex: 1;
}

.ContainerInfo {
    position: relative;
    z-index: 1;
    user-select: none;
}
.ContainerInfo > .ExampleElement {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 1px solid #0524d4;
    box-sizing: border-box;
}
.ContainerInfo > .ExampleElement, .ContainerInfo > span {
    margin: 3px;
    vertical-align: middle;
}
.ContainerInfo .Allowed {
    background: #b0ff7b;
}
.ContainerInfo .Blocked {
    background: #ff7bc8;
}

#ElementsContainer {
    margin-top: 6px;
    background: linear-gradient(to top right, #c2d1ff, 
        hsla(184, 100%, 92%, 0.95), hsla(113, 100%, 97%, 0.8));
    border: 3px solid #a02f0d;
    border-radius: 3%;
    backdrop-filter: blur(1.25px);
}

.Element {
    display: inline-block;
    background: #b0ff7b;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #0524d4;
    box-sizing: border-box;
    cursor: pointer;
    transition: 100ms ease;
    z-index: 1;
    opacity: 1;
    user-select: none;
}
.Element:not([data-no-hover]):hover {
    transform: translate(3px, 3px) !important;
}
.ElemBlocked {
    background: #ff7bc8;
}
.ElemBlockedFX {
    animation: BlockedElements 700ms ease-out forwards;
}
.ElemRestoreFX {
    animation: RestoreElements ease-in-out forwards;
}

@keyframes BlockedElements {
    0% { border: 1px solid #0524d4; background: #ff7bc8; }
    25% { border: 1px solid #ff7b00; background: #fdff7b; }
    100% { border: 1px solid #ff0000; background: #ff7bc8; }
}

@keyframes RestoreElements {
    0% { border: 1px solid #ff0000; background: #ff7bc8; }
    10% { border: 1px solid #ff0000; background: #ffbb7b; }
    40% { border: 1px solid #ff7b00; background: #fdff7b; }
    100% { border: 1px solid #0524d4; background: #b0ff7b; }
}

.TextInfo {
    margin-top: 6px;
    width: 100%;
    max-width: 412px;
    min-width: 300px;
    height: 100%;
    padding: 5px;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    resize: none;
    overflow: auto;
    scroll-behavior: smoothpx;
    box-sizing: border-box;
    border: 1px solid #71aaca;
}
.TextInfo:focus {
    outline: 0;
}
.TextInfo::selection {
    color: rgb(132, 247, 255);
    background: rgb(0, 13, 133);
}

.Table-ContSizes {
    position: relative;
    margin: 10px 3px 20px;
    border-right: 1px solid #71aaca;
    border-bottom: 1px solid #71aaca;
    border-collapse: collapse;
    user-select: none;
    z-index: 1;
}
.Table-ContSizes td {
    padding: 5px;
}
.Table-ContSizes .Size {
    border-bottom: 1px solid #71aaca;
}
.Table-ContSizes .Description {
    cursor: default;
}
.Table-ContSizes .Description > img {
    height: 260px;
    vertical-align: middle;
    filter: invert(10%);
    pointer-events: none;
}
.Table-ContSizes input[name="ContainerSize"], .Table-ContSizes label {
    cursor: pointer;
}

.ParametersList {
    position: relative;
    margin: 3px;
    min-width: 276px;
    list-style-type: none;
    z-index: 1;
}
.ParamListLine {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    border-right: 1px solid #71aaca;
    border-bottom: 1px solid #71aaca;
}
.ParamListLine label {
    padding-right: 10px;
    vertical-align: middle;
    user-select: none;
}
.ParamListLine input[type="number"] {
    width: 40px;
    margin-right: 66px;
    padding: 2px;
}
.ParamListLine .slider {
    display: inline-block;
    min-width: 108px;
    height: 12px;
    position: relative;
    margin: 11px 5px 11px 0;
    border-radius: 4px;
    background-color: #00f500;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #cfbbe0;
    box-sizing: border-box;
} 
.ParamListLine .slider > .thumb {
    width: 8px;
    height: 20px;
    position: relative;
    top: -5px;
    background-color: #2c5cbd;
    border-radius: 3px;
    cursor: pointer;
}
.ParamListLine .slider > .thumb:hover {
    background-color: #3873eb;
}
.ParamListLine .slider > .thumb > .value-output {
    position: absolute;
    top: -15px;
    color: #a14e00;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    font-size: 10pt;
}

.ParametersList::before, .ContainerInfo::before, .Table-ContSizes::before, .H4Background::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: -1;
    margin: -3px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(1.25px);
}

.ClickingObject {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 100px;
    width: 250px;
    color:#315366;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16pt;
    border-radius: 8px;
    user-select: none;
}
.ClickingObject:not([disabled]):active {
    background-color: #ffec44 !important;
}
.ClickingObject > p {
    padding: 2px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    text-align: center;
}
#ClickInfo {
    font-size: 14pt;
    opacity: 0.5;
}