#button-video {
    background-image: url('../assets/images/btnVideo0.png');
}

#button-video-hover {
    background-image: url('../assets/images/btnVideo1.png');
}

#button-text {
    background-image: url('../assets/images/btnText0.png');
}

#button-text-hover {
    background-image: url('../assets/images/btnText1.png');
}

#button-text {
    background-image: url('../assets/images/btnText0.png');
}

#button-audio {
    background-image: url('../assets/images/btnAudio0.png');
}

#button-audio-hover {
    background-image: url('../assets/images/btnAudio1.png');
}

#button-photo {
    background-image: url('../assets/images/btnPhoto0.png');
}

#button-photo-hover {
    background-image: url('../assets/images/btnPhoto1.png');
}

#button-retry {
    background-image: url('../assets/images/btnRetry0.png');
}

#button-retry-hover {
    background-image: url('../assets/images/btnRetry1.png');
}

#button-answer {
    background-image: url('../assets/images/btnAnswer0.png');
}

#button-answer-hover {
    background-image: url('../assets/images/btnAnswer1.png');
}

#button-nextlvl {
    background-image: url('../assets/images/btnNextLvl0.png');
}

#button-nextlvl-hover {
    background-image: url('../assets/images/btnNextLvl1.png');
}

/*========================================================================
Framework styles
========================================================================*/

#background {
    z-index: 0;
    overflow: hidden;
    background-attachment: local;
    white-space: nowrap;
    background-repeat: repeat;
    /* background-size: contain; */
}

.mask-menu-bg {
	/* Set border inside of a div */
    z-index: -1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.mask-menu-bg-img {
    position: absolute;
	width: 100%;
	height: 100%
}

.mask-menu-row {
	background-color: #fff;
	opacity: 0.9;
	border: 1px solid black;
	/* Set border inside of a div */
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.mask-menu-row-text {
    display: inline-block;
    min-width: 180px;
}
    /*  */
.mask-menu-bg {
    z-index: -1;
    background-color: #76b82a;
}

.mask-menu-row {
    background: #549608;
}

.mask-menu-row:hover {
    /*background: #65a719;*/
    background-color: #98d58a;
}

.mask-menu-row-arrow {
    width: 13px;
    height: 9px;
    background-image: url('../assets/images/dot_arrow.png');
}

.mask-menu-row-dot {
    width: 24px;
    min-height: 24px;
    /*height: 24px;*/
    background-image: url('../assets/images/dot_gray.png');
}

.mask-menu-start-container {
    width: 80%;
}
/*
.mask-menu-start-text {
	width: 100%;
}
*/

.mask-ingame-bg {
    z-index: -1;
    background: #B0B0B0;
    opacity: 0.6;
}

.dotline-dot-gray {
    width: 24px;
    height: 24px;
    background-image: url('../assets/images/dot_gray.png');
}

.dotline-dot-wrong {
    width: 24px;
    height: 24px;
    background-image: url('../assets/images/dot_wrong.png');
}

.dotline-dot-right {
    width: 24px;
    height: 24px;
    background-image: url('../assets/images/dot_right.png');
}

.dotline-dot-black {
    width: 24px;
    height: 24px;
    background-image: url('../assets/images/dot_black.png');
}
.dotline-dot-cross {
    width: 24px;
    height: 24px;
    background-image: url('../assets/images/dot_crossed.png');
}

.dotline-dot-num {
    top:4px;
}

.wnd-video {
}

.special-color {
    color: #76b82a;
}

.gameplay-head {
    left: 90px;
    top: -4px;
}

.gameplay-onsolution-block {
    text-align: center;
    margin: auto;
    padding: 70px 0;
    position: relative;
    width: auto;
    /* z-index: 5; */
}

.gameplay-onsolution-text {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 10px 10px;
    color: rgb(248, 244, 10);
    line-height:130%;
    font-size: 22px;
    font-weight: bold;
    background: rgba(48, 82, 4, 0.7);
    border-radius: 15px;
}

.gameplay-head-title {
    line-height:130%;
    width: 600px;
    font-size: 16px;
}

.gameplay-head-level {
    font-size: 16px;
}

.gameplay-head-prog {
    font-size: 24px;
    margin-left: 4px;
}

.gameplay-content {
    left: 310px;
    top: 90px;
    width: 370px;
    max-width: 600px;
    height: 310px;
    opacity: 0.0;
    font-size: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.gameplay-content-2-5 {
    left: 310px;
    top: 115px;
    width: 370px;
    max-width: 600px;
    height: 285px;
    opacity: 0.0;
    font-size: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

.gameplay-btn {
    cursor: pointer;
}

.gameplay-btn-empty {
    /*width: 50px;
    height: 50px;*
    background-color: rgba(255, 0, 110, 0.0);*/
    /*opacity: 0.0;*/
}

.gameplay-tooltip {
    font-size: 14px;
}

.gameplay-btn-cross {
}

.gameplay-btn-circle {
}

.gameplay-btn-correct {
    left:14px;
    top:14px;
    font-size:30px;
}

.solution-indicator {
    z-index: 1;
    pointer-events: none;
}

@keyframes example {
    0%   {opacity: 1;}
    49%   {opacity: 1;}
    50%   {opacity: 0;}
    1000%   {opacity: 0;}
}

.gameplay-krake-animated {
    opacity: 1;
    /*opacity: 0;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;*/
}

@keyframes example2 {
    0%   {opacity: 0;}
    49%   {opacity: 0;}
    50%   {opacity: 1;}
    1000%   {opacity: 1;}
}

.gameplay-krake {
    opacity: 1;
    /*animation-name: example2;
    animation-duration: 2s;
    animation-iteration-count: infinite;*/
    /*display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: 60%;*/
    /*width: 58px;
    height: 58px;
    object-fit: cover;*/
}

.gameplay-type1-words {
    margin: 3px 1px;
    padding: 6px;
    border-radius: 3px;
    background: rgba(120, 180, 40, 0.3);
    cursor: pointer;
    font-size:13px;
}

.gameplay-type1-words:active {
    background: rgba(120, 180, 40, 1.0);
}

.gameplay-type2-word {
    background: rgba(120, 180, 40, 0.3);
    border-radius: 5px;
    padding: 2px;
    line-height:150%;
    margin: 0px 1px;
    position: relative;
}

.gameplay-type2-word:hover {
    background: #76b82a;
}

.gameplay-type3-select {
    width:98%;
}

.gameplay-type4-target {
    min-width:100px;
    display: inline-block;
    border-radius: 3px;
    background: rgba(120, 180, 40, 0.5);
}

.gameplay-type4-text {
    padding-bottom: 6px;
}

.gameplay-type4-word {
    background: rgba(120, 180, 40, 0.3);
    border-radius: 5px;
    padding: 2px;
    line-height:150%;
    margin: 3px 1px;
    padding: 6px;
    position: relative;
}

.gameplay-type4-word:hover {
    background: #76b82a;
}

.gameplay-type5-quest {
    margin: 3px 1px;
    padding: 6px;
    border-radius: 3px;
    background: rgba(120, 180, 40, 0.3);
    font-size:13px;
}

.gameplay-type5-textarea {
    font-size:13px;
    width:98%;
    min-height: 28px;
    border-radius: 5px;
    border-color: #76b82a;
    resize: none;
}

.gameplay-type6-word {
    /* background: rgba(120, 180, 40, 0.3); */
    border-radius: 5px;
    padding: 2px;
    line-height:130%;
    /*margin: 0px 0px 5px;*/
    /*width: 50%;*/
    position: relative;
    z-index: 5;
}

.gameplay-type6-word:hover {
    /*background: rgba(120, 180, 40, 0.3);*/
}

.gameplay-solution-space {
    height: 10px;
}