/*html{*/
    /*font-family:sans-serif;*/
    /*-ms-text-size-adjust:100%;*/
    /*-webkit-text-size-adjust:100%*/
/*}*/
/*body{*/
    /*margin:0*/
/*}*/

/*<editor-fold desc="Prevent text from copy">*/

/*@media print {*/
/*    html,*/
/*    body {*/
/*        display: none;*/
/*    }*/
/*}*/

/*html {*/
/*    user-select: none;*/
/*}*/

/*</editor-fold>*/

body {
    line-height: 3rem;
}

:root {
    --color-blue-main: #3097D1;
    --color-blue-light-main: #3097d191;
    --color-grey-light: #ccd0d2;
    --color-grey-main: #636b6f;
    --collor-grey-dark: #343a40;
}

@media (max-width:576px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }

    .content-col {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.navbar-light .nav-link {
    color: rgba(0,0,0,.5);
}

.container:after, .container:before {
    content: none;
}

/*<editor-fold desc="Welcome page">*/

.welcome .greeting {
    margin-top: 100px;
}

.welcome .greeting-btn-group {
    margin-top: 50px;
    margin-bottom: 25px;
}

.welcome .greeting-btn {
    width: 200px;
    margin-bottom: 20px;
}

/*</editor-fold>*/

.result-score {
    margin-bottom: 25px;
}

.fas.green {
    color: green;
}

.fas.red {
    color: red;
}

.fas.see-green {
    color: #17a2b8
}
.fas.info {
    font-size: 17px;
    color: lightskyblue;
}

.congratulation-title {
    color: #00b300;
}

label {
    font-weight: normal;
}

.form-group small {
    margin-left: 12px;
    margin-bottom: 10px;
}

/*<editor-fold desc="text">*/
input.text {
    display: inline;
    height: 22px;
    padding-left: 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
}

label.text {
    display: inline;
}

label.text textarea {
    line-height: 2rem;
}

label.text input[type=checkbox],
label.text input[type=radio]
{
    margin-left: 10px;
    margin-right: 5px;
    vertical-align: inherit;
}

label.text .option-section {
    margin-left: 5px;
    margin-right: 5px;
}

label.text .option-item label {
    margin-right: 5px;
}

label.text .number {
    margin-left: 5px;
}

.question-block.text .audio-player,
.question-block.text .audio-player .help-audio,
.question-block.text .audio-player .play-button-box {
    display: inline;
}
.question-block.text .audio-player audio {
    height: 20px;
}

.question-block.text .audio-player .help-audio .info {
    display: none;
}
.question-block.text .audio-player.answer {
    padding-left: 10px;
    padding-right: 10px;
}

/*</editor-fold>*/

.form-group-set {
    border-top: thin solid #ccd0d2;
    border-bottom: thin solid #ccd0d2;
    margin-bottom: 20px;
    margin-top: 25px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.form-group-set.top-border-none {
    border-top: none;
}

table.borderless td,table.borderless th{
    border: none !important;
}

/*<editor-fold desc="matching">*/

.table.type-matching .match-row {
    display: flex;
    flex-wrap: wrap;
}

.table.type-matching .match-row-body,
.table.type-matching .match-row-tail {
    min-width: 0;
}

@media (max-width: 576px) {
    .table.type-matching .match-row-body,
    .table.type-matching .match-row-tail {
        flex: 1 1 100% !important;
        max-width: 100%;
    }
}

.match-dropdown-wrapper .dropdown-menu .dropdown-item {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.match-dropdown-wrapper .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

table.type-matching {
    margin-top: 15px;
    color: var(--color-grey-main);
}

table.type-matching input {
    width: 35px;
    padding-left: 10px;
    height: 26px;
}

.type-matching input {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
}

.type-matching ul {
    list-style-type:none;
    padding-left: 0;
    border: 1px solid #ccd0d2;
}

.type-matching ul > li {
    line-height: 1.6;
    padding: 8px;
}

table.type-matching .title-answer {
    font-size: 12px;
}

table.type-matching .title-answer-correct {
    font-size: 12px;
}

/*</editor-fold>*/

.no-border {
    border: none;
}

#countdown-id.clock-alert {
    font-weight: bold;
}

.countdown {
    padding-bottom: 20px;
}

.countdown .display {
    position: absolute;
    left: 42%;
}

.countdown.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background: white;
    padding-bottom: 25px;
    border-bottom: 1px solid #dee2e6!important;
}

.sticky + .container {
    padding-top: 102px;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.spinner-color {
    color: #17a2b8!important;
}

.spinner-position {
    position: absolute;
    top: 50%;
    left: 50%;
}

.spinner-border {
    border: .5em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*<editor-fold desc="Old audio recorder">*/

.play-button-box {
    margin-top: 10px;
}

.play-button-box button {
    margin-right: 10px;
}

.btn-record {
    border:none;
    height: 30px;
    width: 30px;
    background-color: transparent;
    background-image: url(/image/microphone.png);
    background-size: 30px 30px;
}

.btn-stop {
    border:none;
    height: 30px;
    width: 30px;
    background-color: transparent;
    background-image: url(/image/stop.png);
    background-size: 30px 30px;
}

.btn-remove {
    border:none;
    height: 30px;
    width: 30px;
    background-color: transparent;
    background-image: url(/image/remove.png);
    background-size: 30px 30px;
}

/*.btn-download {*/
/*    border:none;*/
/*    height: 30px;*/
/*    width: 30px;*/
/*    background-color: transparent;*/
/*    background-image: url(/image/download.png);*/
/*    background-size: 30px 30px;*/
/*}*/

.btn-download:disabled, .btn-remove:disabled, .btn-stop:disabled, .btn-record:disabled{
    background-color: #d7d7d7;
    border-radius: 15px;
    opacity: 0.2;
}

/*</editor-fold>*/

/*<editor-fold desc="Default buttons">*/

.btn.btn-grey-outlier {
    color: var(--color-grey-main);
    border: 1px solid var(--color-grey-light);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn.btn-grey-outlier:hover {
    background-color: rgba(108, 117, 125, 0.1);
    color: var(--color-grey-main);
    border-color: var(--color-grey-main);
}

.btn.btn-grey-outlier:active {
    background-color: rgba(108, 117, 125, 0.2);
    color: var(--collor-grey-dark);
    border-color: var(--collor-grey-dark);
}

.btn.btn-grey-outlier:focus {
    outline: none;
    color: var(--color-grey-main);
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); /* Similar to Bootstrap */
}

/*</editor-fold>*/

/*<editor-fold desc="Wavesurfer audio recorder">*/

.audio-player-wavesurfer .audio-warning {
    color: #ff7700;
}
.audio-player-wavesurfer .row {
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.audio-player-wavesurfer select.audio-mic-select {
    vertical-align: middle;
    height: 29px;
}

.audio-player-wavesurfer .btn {
    padding-left: 22px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.audio-player-wavesurfer .btn-audio-record {
    background-position: 2px center;
    background-image: url(/image/audio/mic-red.png);
    background-size: 21px 21px;
}

.audio-player-wavesurfer .btn-audio-stop {
    background-position: 4px center;
    background-image: url(/image/audio/stop-grey-solid.png);
    background-size: 16px 16px;
}

.audio-player-wavesurfer .btn-audio-pause {
    background-position: 4px center;
    background-image: url(/image/audio/pause-grey-solid.png);
    background-size: 16px 16px;
}

.audio-player-wavesurfer .btn-audio-play {
    background-position: 4px center;
    background-image: url(/image/audio/play-grey-solid.png);
    background-size: 16px 16px;
}

.audio-player-wavesurfer .btn-audio-download {
    background-position: 4px center;
    background-image: url(/image/download-grey.png);
    background-size: 16px 16px;
}

.audio-player-wavesurfer .audio-player-container {
    margin-top: 1rem;
}

.audio-player-wavesurfer .audio-timer {
    /*min-width: 40px;*/
    /*border: 1px solid var(--color-grey-light);*/
    padding-top: 10px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left: 1px solid var(--color-grey-light);
    border-top: 1px solid var(--color-grey-light);
    border-bottom: 1px solid var(--color-grey-light);
    border-right: none;
}

.audio-player-wavesurfer .audio-duration {
    /*min-width: 40px;*/
    /*border: 1px solid var(--color-grey-light);*/
    padding-top: 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
    border-top: 1px solid var(--color-grey-light);
    border-bottom: 1px solid var(--color-grey-light);
    border-right: 1px solid var(--color-grey-light);
}

.audio-player-wavesurfer .loader,
.audio-player-wavesurfer .error {
    padding-top: 10px;
    padding-left: 10px;
    z-index: 100;
    font-weight: bold;
}

.audio-player-wavesurfer.text .loader,
.audio-player-wavesurfer.text .error {
    padding-top: 2px;
    padding-left: 5px;
    line-height: 2rem;
}

.audio-player-wavesurfer .audio-canvas {
    border: 1px solid var(--color-grey-light);
    max-width: 747px;
}

.audio-player-wavesurfer .audio-canvas.recorder {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.audio-player-wavesurfer.text .audio-canvas {
    border-radius: 4px;
    width: 184px;
}

@media (max-width: 767px) {
    .audio-player-wavesurfer .audio-timer {
        padding-top: 0;
        border: none;
    }

    .audio-player-wavesurfer .audio-duration {
        padding-top: 0;
        border: none;
    }

    .audio-player-wavesurfer .audio-canvas {
        border-radius: 4px;
    }
}

/*<editor-fold desc="Text view">*/

.text .audio-player-wavesurfer .btn {
    height: 25px;
    padding-left: 13px
}

.text .audio-player-wavesurfer select.audio-mic-select {
    width: 150px;
    height: 25px;
}

.text .audio-player-wavesurfer .audio-canvas.recorder {
    width: 250px;
}

/*.text .audio-player-wavesurfer .btn-audio-play {*/
/*    height: 25px;*/
/*    padding-left: 13px;*/
/*}*/

/*</editor-fold>*/

/*</editor-fold>*/

.form-group {
    margin-bottom: 20px;
}

.form-group .audio-player {
    padding-top: 15px;
    padding-bottom: 15px;
}

.form-group .audio-player.no-answer {
    padding-top: 0;
    padding-bottom: 0;
}

.audio-player .timeline {
    display: none;
}

.form-group .audio-player .speech-done {
    margin-left: 40px;
}

.form-group .audio-player .speech-done.hide {
    display: none;
}

.audio-player .stop-watch {
    font-weight: bold;
}

.help-audio {
    padding-bottom: 15px;
    font-size: 12px;
    color: #808080cf;
}

.help-audio img {
    height: 18px;
}

.help-audio img.grey-button {
    background-color: #d7d7d7;
    border-radius: 15px;
    opacity: 0.2;
}

.form-group .btn-record.recording {
    animation: blinker 3s linear infinite;
}

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

.additional-block {
    margin-top: 15px;
    margin-left: 22px;
    line-height: 2;
}

.additional-block.type-variant {
    margin-bottom: 20px;
    margin-left: 14px;
}

.additional-block.type-variant input[type=checkbox],
.additional-block.type-variant input[type=radio] {
    margin-top: 7px;
}

.additional-block.type-text {
    margin-bottom: 22px;
}

.additional-block.type-matching {
    margin-left: 14px;
}

.additional-block.type-matching .match-row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 576px) {
    .additional-block.type-matching {
        margin-left: 0;
    }
}


.answer-review {
    margin-bottom: 15px;
    color: #808080cf;
}

.answer-review .title {
    font-weight: bold;
    margin: 10px 0 10px 0;
}

.question-block.text .answer-review {
    padding-left: 22px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.no-wrap {
    white-space: nowrap;
}

table {
    font-size: 14px;
}

.question-block .answer-placeholder {
    border-bottom: 1px solid;
    padding-left: 100px
}

.question-block select {
    display: inline;
}

.question-block select {
    display: inline;
    height: 22px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
}

/*<editor-fold desc="Results">*/

.question-block .correct {
    background:
        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0MUFENDk7fQo8L3N0eWxlPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNDM0LjgsNDkgMTc0LjIsMzA5LjcgNzYuOCwyMTIuMyAwLDI4OS4yIDE3NC4xLDQ2My4zIDE5Ni42LDQ0MC45IDE5Ni42LDQ0MC45IDUxMS43LDEyNS44IDQzNC44LDQ5ICAgICAiLz48L2c+PC9zdmc+)
        no-repeat
        left center;
    padding-left: 12px;
}

.question-block .wrong {
    background:
        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMiA3OTI7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNFNDQwNjE7fQo8L3N0eWxlPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzgyLjIsMzk2LjQgNTYwLjgsMjE3LjggNDg0LDE0MSAzMDUuNCwzMTkuNiAxMjYuOCwxNDEgNTAsMjE3LjggMjI4LjYsMzk2LjQgNTAsNTc1IDEyNi44LDY1MS44ICAgIDMwNS40LDQ3My4yIDQ4NCw2NTEuOCA1NjAuOCw1NzUgMzgyLjIsMzk2LjQgICIvPjwvZz48L3N2Zz4=)
        no-repeat
        left center;
    padding-left: 12px;
}

.question-block .normal {
    background:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAQUlEQVQYV2NkgAARBgYGFyh7DwMDwxtGqKAbAwPDWqhEMAMDwy6QRDgDA8MGBgaGn1AJdgYGhgC8EiDzsRqF1XIAmn0M3RQ3OkcAAAAASUVORK5CYII=)
        no-repeat
        left center;
    padding-left: 9px;
    margin-left: 3px;
}

.question-block .answer-icon {
    background:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAtUlEQVQ4jcXRvWoCQRQF4C8/oEIqBV9GS/MgpvMJgthsIGBtY2HtY2y5qXwO2ySldhZZYRx2dlctcmCY+3Pu4dwZ7sRDlA8wxVMFd4t9k+Ac/Yp6hhVe4sZjlHfwnRD/wCee6wRSOPpbd43FLQIbzPCG1zpiVt7vGDdwEO0TYIIeumV8Rh4TUwKhzXjowllKoCgHc4yC+ldbB0V0QoQrJX/hB4dEr5WD/3vEHZb4TQjDsKZ3PU4wQBsnkyg98QAAAABJRU5ErkJggg==)            no-repeat
        no-repeat
        left center;
    padding-left: 14px;
    margin-right: 6px;
}

.question-block .defined {
    font-weight: bold;
}

.question-block .answer {
    margin-left: 8px;
    color: #808080cf;
}

.question-block .text .answer {
    font-style: italic;
}

.question-block .gap-answer {
    border-bottom: 1px solid;
    padding-left: 10px;
    padding-right: 10px;
}

.question-block .gap-answer.text {
    border: none;
}

.answer-options {
    margin-top: 10px;
    font-size: 13px;
    color: #808080cf;
}

.result .next-button-block {
    display: block;
    margin-top: 15px;
}

/*<editor-fold desc="Text section">*/

.additional-block .variant-answer {
    margin-left: 10px;
}

.question-block.text {
    display: inline;
}

.question-block.text label {
    display: inline;
}

.question-block.text textarea{
    width: 97%;
}

.question-block.text div.variant {
    margin-right: 8px;
    display: inline;
}

.question-block.text .variant i  {
    margin-left: 5px;
    margin-right: 5px;
}

.question-block .variant-answer-block {
    margin-left: 5px;
}

.additional-block.text {
    display: inline;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 25px;
}

.answer-options.text {
    display: inline;
}

.answer-options-item {
    margin-left: 5px;
}

textarea.text {
    width: 100%;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

i.space {
    margin-left: 5px;
}
/*</editor-fold>*/

/*</editor-fold>*/

#removeRecord {
    margin-top: 100px;
}

.btn.next {
    float: right;
    padding-right: 0;
}

.btn.prev {
    padding-left: 0;
}

.progress.presentation {
    height: 3px;
    margin-bottom: 0;
    margin-top: 22px;
}

.required-field,
select.required-field,
input.required-field,
textarea.required-field{
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

.play-button-box span.required-field {
    margin-right: 10px;
    padding: 19px 0 1px 4px;
    border: 1px solid #dc3545;
    border-radius: 4px;
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

.play-button-box span.required-field button.btn-record {
    margin: 0;
}

input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: none;
}

select:focus {
    border-color: #98cbe8;
    outline: none;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(152 203 232 / 60%);
}

/*<editor-fold desc="Bootstrap">*/

.btn.focus, .btn:focus, .btn:hover {
    color: #e4e0e0;
    text-decoration: none;
}

.form-control-text {
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.form-control-text:focus {
    border-color: #98cbe8;
    outline: 0;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(152 203 232 / 60%);
}

/*</editor-fold>*/

/*<editor-fold desc="Session page">*/

.session-description {
    padding-bottom: 3rem;
}

/*</editor-fold>*/

/*<editor-fold desc="Questionnaire Test page">*/

/*<editor-fold desc="Questionnaire List">*/

.list-group .score {
    width: 70px;
    padding-left: 8px;
}

/*</editor-fold>*/

/*</editor-fold>*/

/*<editor-fold desc="YouTube iframe wrapper">*/

@media (min-width: 576px) {
    iframe.note-video-clip.yt-size-small {
        width: 40%;
        aspect-ratio: 16 / 9;
    }

    iframe.note-video-clip.yt-size-medium {
        width: 60%;
        aspect-ratio: 16 / 9;
    }

    iframe.note-video-clip.yt-size-large {
        width: 80%;
        aspect-ratio: 16 / 9;
    }

    iframe.note-video-clip.yt-size-full {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 576px) {
    iframe.note-video-clip {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Breadcrumbs">*/

ol.breadcrumb {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 5px;
}

ol.breadcrumb .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    color: var(--color-blue-main);
}


ol.breadcrumb .dropdown-toggle::after {
    display: none !important;
}

ol.breadcrumb .dropdown-toggle::before {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.nav-link .dropdown-item.active, .dropdown-item:active {
    background-color: var(--color-blue-main);
}

.fas.nav-drop-item.small {
    font-size: 6pt;
}

.fas.fa-circle.nav-drop-item.small {
    font-size: 4pt;
}

.fas.fa-info-circle.nav-drop-item {
    padding-top: 7px;
}

.fas.nav-drop-item {
    width: 18px;
    text-align: center;
    position: absolute;
    padding-top: 11px;
}

ol.breadcrumb .dropdown-title
{
    padding-left: 20px;
    box-decoration-break: clone;
    -webkit-box-decoration-break:clone;
}
@media (max-width: 576px) {
    .dropdown-item {
        white-space: normal;
    }

    .breadcrumb-item a {
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/*</editor-fold>*/


/*<editor-fold desc="Measurement result">*/

.measurement-result {
    border-color: var(--color-blue-light-main);
    border-width: 2px;
    border-radius: 7px;
}

.measurement-result .card-title {
    color: var(--color-blue-main);
}

@media (min-width:576px) {
    .measurement-result .score-from {
        display: inline-block;
        width: 25px;
    }

    .measurement-result .score-delimiter {
        display: inline-block;
        width: 20px;
    }
}
/*</editor-fold>*/

.dropdown-menu.dropdown-menu-flag {
    min-width: 50px;
}

.dropdown-menu-flag .dropdown-item {
    padding-bottom: 6px;
}

.flag {
    display: inline-block;
    width: 29px;
    height: 19px;
    padding-bottom: 1px;
    background-size: cover;
}

.flag-ukr {
    background-image: url(/image/flag/ukr.png);
}

.flag-eng {
    background-image: url(/image/flag/eng.png);
}

/* Override: make .btn-outline-primary visually identical to .btn-primary */
.btn-outline-primary {
    color: var(--color-blue-main);
    background-color: transparent;
    border: 1px solid var(--color-blue-main);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-blue-main);
    border-color: var(--color-blue-main);
}
.btn-outline-primary:focus {
    color: var(--color-blue-main);
    background-color: transparent;
    border-color: var(--color-blue-main);
    box-shadow: 0 0 0 0.2rem rgba(48,151,209,.35);
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    color: var(--color-blue-main);
    background-color: transparent; /* keep transparent unless hovered */
    border-color: var(--color-blue-main);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--color-blue-main);
    background-color: transparent;
    border-color: var(--color-blue-main);
    opacity: .45;
}
.btn-outline-primary .badge {
    color: #fff;
    background-color: var(--color-blue-main);
}