/* Import all components */
@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';

/* Reference import */
@import (reference) "semantic.less";


/*******************************
    Tutorial Code Validation
*******************************/

.tutorialCodeValidation {
    position: absolute;
    max-width: 100%;
    min-width: 18.75rem;
    top: ~'calc(50% + 3rem)';
    right: 2rem;
    padding: 0.625rem 1.625rem;
    border-radius: 1.2rem;
    background: @white;
    z-index: @tutorialLightboxCardZIndex;
    border: 0.5rem solid @black;
    box-shadow: 0rem 0rem 0.5rem 0.063rem rgba(0, 0, 0, .3);
}

.tutorialCodeValidation:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0.313rem;
    top: -1.5rem;
    bottom: auto;
    border: 1rem solid;
    border-color: transparent @black transparent transparent;
    transform: rotateZ(-135deg);
}

.tutorialCodeValidation > div {
    max-height: 60vh;
    overflow: auto;
}

.tutorialCodeValidation.hidden {
    display: none;
}

.tutorialCodeValidation .mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.ui.button.no {
    right: 2rem;
    background-color: @black;
    color:white;
}

.ui.button.yes {
    left: 2rem;
    margin-right: 2rem;
}

.codeValidationPopUpText {
    font-size: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: pre-line;
}