@import url("../../../shared_assets/animate.css");

html, body {
    width: 100%;
    height: 100%;
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
}

main {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
}

#board-container {
    display: none;
}

.screen-board #intro-container {
    display: none;
}

.screen-board #board-container {
    display: block;
}

.modal-hint #modal-close-btn {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    z-index: 99999;
    position: relative;
    text-align: right;
    float: right;
    background-color: gray;
    padding: 10px;
    border-radius: 40px;
    right: -35px;
    top: -35px;
    border: solid 1px white;
}

.modal-hint .modal-close-btn {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    z-index: 99999;
    position: relative;
    text-align: right;
    float: right;
    background-color: gray;
    padding: 10px;
    border-radius: 40px;
    right: -35px;
    top: -35px;
    border: solid 1px white;
}

#hint-btn {
    text-decoration: underline;
    font-weight: normal;
    font-size: .65em;
    cursor: pointer;
}


/* TODO: New responsive design remove below */
#question-container {
	display: block;
	height: auto !important;
}
#question-indicator {
	display: none;
}

#question-section {
	height: 100%;
	padding: 0;
	margin: 0;
}
.photo-zoom-button {
	display: none;
}
.browser-device-mobile .answer-clicked .answer-back-button {
    display: none;
}
.browser-device-mobile .question-answer-selected .answer-idle {
    display: block;
}