@charset "UTF-8";

:root {
    --color-cyan: #5edcd4;
    --color-pomegranate: #c0392b;
    --color-asphalt: #34495e;
}

body {
    background-image: url("../images/building-uyebjl4.png");
}

label.required:before {
    content: "*";
    color: var(--color-pomegranate);
}

code {
    border-radius: 5px;
}

.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.text-th-primary {
    color: var(--color-cyan) !important;
}

.text-company-first {
    color: var(--color-cyan);
}

.text-company-last {
    color: var(--color-asphalt);
}

.captcha {
    position: relative;
    display: block;
    border: 2px solid var(--bs-border-color);
    width: var(--width);
    height: var(--height);
    background: var(--image);
    touch-action: none;
}

.captcha-piece {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pieceWidth);
    height: var(--pieceHeight);
    background: var(--image) top right;
}

.captcha-piece::after {
    position: absolute;
    content: '';
    width: calc(var(--pieceWidth) + 10px);
    height: calc(var(--pieceHeight) + 10px);
    background: url("../images/puzzle/piece-contour-dWb4P5W.png") no-repeat;
    transform: translate(-4px, 0px);
    transition: .3s;
}

.captcha:not(.captcha-waiting-interaction) .captcha-piece:not(.is-moving)::after {
    opacity: .3;
}