.draw-wrapper {
    max-width: 1260px;
    /*max-height: 666px;*/

    display: flex;
    border-top: 5px solid #255e83!important;
    border-bottom: 5px solid #255e83!important;
	flex-direction: row;
    align-items: stretch;
	
	touch-action: manipulation;
}

.draw-canvas_wrapper {
    flex: 1;
    position: relative;
    background-image: url(images/drawer/canvas_bg.webp);
    background-size: cover;
}

#draw-canvas {
    position: relative;
    z-index: 1;
}

.draw-toolbox_wrapper-tools_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /*margin-bottom: 20px;*/
}

.draw-canvas_wrapper canvas {
    /*background-image: url('images/drawer/canvas_bg.webp');*/
}

.draw-toolbox_wrapper {
    width: 273px;
	/*height: 666px;*/
    background-color: #255e83!important;
    text-align: center;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 40px;
}

.draw-toolbox_wrapper-header {
    color: white;
    /*margin: 40px 0 50px 0;*/
}

.draw-toolbox_wrapper-tools_colors {
    /*margin-bottom: 56px;*/
}

.draw-toolbox_button_small {
    width: 64px;
    height: 64px;
    background-color: #517e9c!important;
    border:none;
    border-radius: 60px;
    position: relative;
    cursor: pointer;
    transition: all .2s ease-in-out;
	padding: 0;
}

.draw-toolbox_button_big {
    width: 100px;
    height: 100px;
    background-color: #517e9c!important;
    border:none;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.draw-toolbox_button-undo {
    margin-left: 28px;
}

.draw-toolbox_button-undo img {
    position: absolute;
    width: 38px;
    height: 38px;
    top:13px;
    left:15px;
	padding: 0;
}

.draw-toolbox_button-erase {
    margin-right: 28px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
}

.draw-toolbox_button-erase img {
    position: absolute;
    width: 64px;
    height: 64px;
    top:18px;
    left:18px;
	padding: 0;
}

.draw-toolbox_button-color {
    width: 54px;
    height: 54px;
    border-radius: 54px;
    position: relative;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
    margin: 10px 7px;
    cursor: pointer;
	padding: 0;
}

.draw-toolbox_button_group_toggle {
    transition: all .2s ease-in-out;
    transform: scale(1.0);
}

.draw-toolbox_button-selected {
    transform: scale(1.1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}
.draw-toolbox_button-selected,
.draw-toolbox_button-selected:focus,
.draw-toolbox_button-selected:hover,
.draw-toolbox_button-selected:active,
.draw-toolbox_button-color,
.draw-toolbox_button-color:focus,
.draw-toolbox_button-color:hover,
.draw-toolbox_button-color:active,
.draw-toolbox_button-undo,
.draw-toolbox_button-undo:focus,
.draw-toolbox_button-undo:hover,
.draw-toolbox_button-undo:active,
.draw-toolbox_button-erase,
.draw-toolbox_button-erase:focus,
.draw-toolbox_button-erase:hover,
.draw-toolbox_button-erase:active {
	outline: none !important;
	outline: 0 !important;
	outline: transparent !important;
	border: 0 !important;
	border: none !important;
}

.draw-toolbox_button-color:hover,
.draw-toolbox_button_small:hover,
.draw-toolbox_button_big:hover {
    transform: scale(1.1);
}

.draw-toolbox-back_link {
    color: white!important;
    font-size: 16px;
    text-decoration: none!important;
}

.draw-toolbox-back_link_icon {
    text-decoration: none!important;
}

.draw-toolbox-back_link_test {
    text-decoration: underline!important;
}

/* Tabs */

.draw-tabs-menu {
    display: inline-flex;
    vertical-align: bottom;
	position: relative;
    width: 100%;
	font-size: 22px;
    font-family: "Lora", "Georgia", "serif";
	color: #ffffff;
	font-weight: bold;
	font-style: italic;
}
@media screen and (min-width: 480px) {
    .print_btn {
        position: absolute;
        right: 0;
        width: 40px;
        height: 40px;
    }
}
.print_btn button {
	background: none;
	background-image: url(images/drawer/printer-icon.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 40px 40px;
	-moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
	margin: 0;
    padding: 0;
}

.tab-buttons {
    width: 220px;
    height: 50px;
    cursor: pointer;
	display: inline-flex;
    align-items: center;
    padding-left: 10px;
}
.draw-tab-problem {
    background-image: url(images/drawer/tab-normal.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: cover;
	/*padding: 12px 0 0 15px;	*/
	z-index: 1;
}
.draw-tab-problem.active {
    background-image: url(images/drawer/tab-active.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: cover;
	z-index: 2;
}
.draw-tab-drawer {
	fill:#628fac;
    background-image: url(images/drawer/tab-normal.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: cover;
    margin-left: -10px;
	/*padding: 12px 0 0 15px;	*/
	z-index: 1;
}
.draw-tab-drawer.active {
    background-image: url(images/drawer/tab-active.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    background-size: cover;
	z-index: 2;
}

.tab-buttons .icon {
    display: inline-block;
    vertical-align: middle;
	margin-right: 10px;
}
.draw-tab-problem .icon {
	background-image: url("images/drawer/problem-icon_empty.svg");
	width: 41px;
    height: 31px;
}
.draw-tab-problem.active .icon {
	background-image: url("images/drawer/problem-icon.svg");
}
.draw-tab-drawer .icon {
	background-image: url("images/drawer/drwaing-icon_empty.svg");
	width: 48px;
    height: 31px;
}
.draw-tab-drawer.active .icon {
	background-image: url("images/drawer/drwaing-icon.svg");
}


.mgame__data-problem-container {
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
}

.mgame__data-problem-container:after {
  content: "";
  display: table;
  clear: both;
}

.mgame__data-problem-container-preview {
	max-width: 596px;
	background-image: url('images/drawer/canvas_bg.webp');
	margin-right: 20px;
	display:none;
}

.mgame-row {
	flex:50%;
}

@font-face {
    font-family: 'KGTenThousandReasons';
    src: url('fonts/kg-ten-thousand-reasons.woff2') format('woff2'),
         url('fonts/kg-ten-thousand-reasons.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#canvas-description {
    color: #fff;
    font-family: 'KGTenThousandReasons', "Segoe UI", "Trebuchet MS", Verdana, "sans-serif";
    padding: 15px;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
#canvas-description p {
	letter-spacing: 0.1rem;
}

#canvas-description span[data-type="operand"] {
    border: 1px solid #fff;
    border-radius: 30px;
    padding-left: 11px;
    padding-right: 11px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 48px;
}

#canvas-description:last-child {
	line-height: 12px;
	pointer-events: none;
}
@media screen and (max-width: 1099px) {
	.mgame__data-problem-container {
		display: block;
		
	}
}
@media screen and (max-width: 639px) {
	.mgame__data-problem-container-preview {
    	max-width: -webkit-fill-available;
		width: auto;
		margin-right: 0px;
		margin-bottom: 10px;
	}
}