@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic');

@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');

@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Lobster|Ruslan+Display&subset=cyrillic');

@import url('https://fonts.googleapis.com/css?family=Titan+One');

@import url('https://fonts.googleapis.com/css?family=Exo+2:200&subset=cyrillic');

@import url('https://fonts.googleapis.com/css?family=Nixie+One');



/* Webfont: BloggerSans-Bold */

@font-face {

	font-family: 'BloggerSans';

	src: url('fonts/BloggerSans-Bold.eot'); /* IE9 Compat Modes */

	src: url('fonts/BloggerSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

		 url('fonts/BloggerSans-Bold.woff') format('woff'), /* Modern Browsers */

		 url('fonts/BloggerSans-Bold.ttf') format('truetype'), /* Safari, Android, iOS */

		 url('fonts/BloggerSans-Bold.svg#BloggerSans-Bold') format('svg'); /* Legacy iOS */

	font-style: normal;

	font-weight: bold;

	text-rendering: optimizeLegibility;

}



* {margin:0; padding:0; position:relative; outline:none;}

html, body {text-align: center;width:100%; font-family: 'Roboto', sans-serif; font-size:16px; color:#333; background:#282B2F; padding:1px; box-sizing:border-box;}



a:link {}

a:visited {}

a:active {}

a:hover {}
#canvas {
    z-index: 1;
     position: sticky;
  top: 0;
    margin-right:50%;
    margin-left:50%;
    border-radius: 20px;
    display:block;
    margin: 0 auto;
    box-shadow: 0 0 0 1px #aaa;
    box-sizing:border-box;
}


::-webkit-scrollbar {

       border-radius: 18px;
  width: 10px;               /* ширина scrollbar */
}
::-webkit-scrollbar-track {

     border-radius: 18px;
    opacity: 0.33;
  background: #transparent;        /* цвет дорожки */
}
::-webkit-scrollbar-thumb {
 
     border-radius: 18px;
    opacity: 0.33;
  background-color: #transparent;    /* цвет плашки */
  border-radius: 20px;       /* закругления плашки */
  border: 3px solid #transparent;  /* padding вокруг плашки */
}

  width: 10px;
  border-radius: 18px;
}

iframe::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 18px;
  opacity: 0.33;
}

iframe::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  border: 3px solid transparent;
  opacity: 0.33;
}

canvas {

background: #1A1C1E;

	position: sticky;
	top: 2px;
	margin-right: 50%;
	margin-left: 50%;
	border-radius: 20px;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 0 1px #aaa;
	box-sizing: border-box;

}



.advice {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 14pt;
  color: #aaa;
}



label {
    font-weight: 500;

font-family: 'Roboto', sans-serif;
    color:#fff;
    display:block;
    height:15px;
    line-height:15px;
    font-size:10px;
    margin-bottom:5px;
    text-transform:uppercase;
    vertical-align:top;
}

.btn-label {
    display:inline-block;
    width:15px;
    height:15px;
    line-height:13px;
    text-align:center;
    background:#ddd;
    border-radius:2px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,1);
    cursor:pointer;
    margin-right:10px;
}

.float-right {
    float:right;
}

label.big {
    font-size:14px;
    margin-bottom:25px;
}

label.inline {
    height:35px;
    line-height:35px;
    margin-bottom:0;
    margin-right:15px;
    width:auto;
    display:inline-block;
}


.mobcanv{
    height:240px;
    width:100%; 
    overflow : auto;
    
}

label.right {
    margin-right:35px;
}

input {
        width:75px;
    height: 30px;
    text-align: center;
    border-radius: 20px;
    display:block;
    
    box-sizing:border-box;
    background:#1C1E21;
    margin-bottom:35px;

    line-height:35px;
    padding:0 7px;
    font-size:16px;
    font-weight: 500;
    border:1px solid #515159;
    transition:all 0.3s ease-in-out;
font-family: 'Roboto', sans-serif;
    color:#4E40AD;
    vertical-align:top;
}

textarea {
    border-radius: 20px;
    display:block;
    width:100%;
    box-sizing:border-box;
    background:#1C1E21;
    margin-bottom:15px;
    height:55px;
    padding:0 17px;
    font-size:16px;
    border:0;
    border-bottom:1px solid #4E40AD;
    transition:all 0.3s ease-in-out;
    font-family: 'Open Sans', sans-serif;
    color:#fff;
    vertical-align:top;
}

input.inline {
    display:inline-block;
    width:auto;
    margin-bottom:0px;
    margin-right:15px;
}

input.small {
    height: 20px;
    width:40px;
    padding:10;
    font-size:12px;
}
.select{
    border-radius: 20px;
  
    background:#404245;
        border:1px solid #404245;

    padding-bottom:10px;

height: 20px;
    border-radius: 20px;
}
.colors{
    padding:5px;
    border:1px solid #404245;

    border-radius: 20px;
}




input[type=color] {
    border-radius: 20px;
    width:25px;
    height:25px;
    padding:0;
    
    -webkit-appearance: none;
    
}

input[type=number] {
border-radius: 20px;
    -webkit-appearance: textfield;
   -moz-appearance:    textfield;
   appearance:         textfield;
}

input[type=checkbox] {
    width:15px;
    height:15px;
    margin-top:10px;
    margin-bottom:10px;
    display:inline-block;
}

.forcheckbox {
    padding:5px;
    border:1px solid #404245;

    border-radius: 20px;
    height:25px;
    line-height:25px;
}

.color_item {
    border-radius: 20px;
    display:inline-block;
    width:135px;
    overflow:hidden;
    margin-top: 10px;
}

.color_item input {
    border-radius: 20px;
    margin-right:4px;
}

.forcheckbox input {
    margin-right:10px;
    vertical-align:top;
    margin-top:5px;
    margin-bottom:5px;
}

.forcheckbox label {
    display:inline-block;
    vertical-align:top;
    height:25px;
    line-height:25px;
    font-size:10pt;
}


input::file-selector-button {
    background:#41454C;
    font-weight: bold;
    color: #fff;
    
    padding: 0.5em;
    border: thin solid #41454C;
    border-radius: 2px;
}

input[type=file] {
    text-align: center;
    justify-content: center;
    margin: 2px;
    margin-bottom:10px;
    margin-right:50%;
    min-height:32px;
    min-width:125px;
    border:0;
    -webkit-appearance: none;
    font-size:14px;
    padding:0;
    line-height:normal;
}




.button {
    display:inline-block;
    padding:0 8px;
    height:30px;
    line-height:30px;
    font-size:10pt;
    border-radius:20px;
    color:#fff;
    background:#5241B3;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.38);
}

.button.save {
    position: absolute;
    top: 0;
    right: 0;
    z-index:100500;
}

input:hover, input:focus {
    color:#5241B3;
    border-color:#5241B3;
}

input.errors, textarea.errors {
    color:#f00;
    border-color:#f00;
}



input[type="color"]::-webkit-color-swatch-wrapper {
    
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}



.parameters .col {
    display:inline-block;
    vertical-align:top;
    font-size:16px;
    max-width:100%;
    margin-bottom:5px;
    
}

.parameters .subcol {
    
        font-weight: 500;
    color:#fff;
    display:inline-block;
    vertical-align:top;
    font-size:16px;

    white-space:normal;
}

.parameters .col.first {
    margin-right:10px;
}

.parameters .subcol.first {
    margin-right:5px;
}

.parameters .row {
    font-size:16px;
    text-transform:uppercase;
    height:25px;
    line-height:25px;
    margin-bottom:25px;
    margin-top: 40px;
    font-weight:bold;
}

/*.parameters .col .row {
    font-size:14px;
}*/

.parameters .line {
    display:inline-block;
    margin-bottom:35px;
    vertical-align:top;
}

.progress {
    display:inline-block;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(220,220,220,0.8);
    color:#E07070;
    font-size:0;
    text-align:center;
    overflow: auto;
    white-space: nowrap;
}

.progress:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.progress span {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    font-size:30px;
    font-weight:bold;
    height:200px;
    line-height:200px;
}

.progress.hidden {
    display:none;
}

.progress svg {
    position:absolute;
    top:50%; left:50%;
    margin:-100px 0 0 -100px;
}

.tabs {
    z-index: 1;
        background:#282B2F;
        position: fixed;
    overflow: auto;
            overflow-y: hidden;
    white-space: nowrap;
     justify-content: center;
     margin-left: 25%;
    margin-right: 25%;

  max-width: 650px;
    height:30px;
    border-bottom:2px solid #4E40AD;
    margin-top:6px;
    padding-top:8px;
    margin-bottom:80px;
    border-radius: 20px
}

.tabs .tab {
    
    

    border-top:2px solid #404245;
    border-radius: 10px 10px 0 0;
    display:inline-block;
    height:30px;
    line-height:30px;
    background:#2E3135;
    color:#fff;
    padding:0 18px;
    margin-right:4px;
    cursor:pointer;
    text-transform:uppercase;
    font-weight:bold;
    font-size:9pt;
}

.tabs .tab:hover {
    background:#5241B3;
    color:#fff;
}

.tabs .tab.cur {
    background:#4E40AD;
    color:#fff;
}


.container13 {
	
	    z-index: 3;
  transform-origin: center;
  position: fixed;
  top:30px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "aaa1 bbb1"
    "aaa1 bbb1";
}

.aaa1 { grid-area: aaa1; }
.bbb1 { grid-area: bbb1; }




.container11 {
	    z-index: 3;
  transform-origin: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "aaa bbb"
    "aaa bbb";
}

.aaa { grid-area: aaa; }
.bbb { grid-area: bbb; }


@media screen and (max-width: 600px) {
    
    .container13 {
	
	    z-index: 3;
  transform-origin: center;
  position: fixed;
  top:30px;
  right:-90px;
  transform: translate(-50%, -50%);
  text-align: center;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "aaa1 bbb1"
    "aaa1 bbb1";
}

.aaa1 { grid-area: aaa1; }
.bbb1 { grid-area: bbb1; }

    
    input::file-selector-button {
    background:#41454C;
    font-weight: bold;
    color: #fff;
    
    padding: 0.5em;
    border: thin solid #41454C;
    border-radius: 2px;
}




input[type=file] {
	
    text-align: center;
    justify-content: center;
    margin: 2px;
    margin-bottom:10px;
    margin-right:50%;
    min-height:32px;
    min-width:125px;
    border:0;
    -webkit-appearance: none;
    font-size:14px;
    
    padding:0;
    line-height:normal;
}
    
    
input[type=checkbox] {
    width: 15px;
 
 bottom: 5px;

}
    
    .forcheckbox {
    padding:5px;
    border:1px solid #404245;

    border-radius: 20px;
    height:15px;
    line-height:15px;
}



.forcheckbox input {
    margin-right:10px;
    vertical-align:top;
    margin-top:5px;
    margin-bottom:5px;
}

.forcheckbox label {
    display:inline-block;
    vertical-align:top;
    height:15px;
    line-height:15px;
    font-size:10pt;
}
    
    
    input {
        width:75px;
    height: 20px;
    text-align: center;
    border-radius: 20px;
    display:block;
    
    box-sizing:border-box;
    background:#1C1E21;
    margin-bottom:25px;

    line-height:15px;
    padding:0 7px;
    font-size:13px;
    font-weight: 500;
    border:1px solid #515159;
    transition:all 0.3s ease-in-out;
font-family: 'Roboto', sans-serif;
    color:#4E40AD;
    vertical-align:top;
}
    
.transparentbg {
    border-radius:15px;
opacity: 0.98;
background:#282B2F;
    height: 26px;
    position: fixed;
    top: 2px;
    left: 2px;
    width: 50%;
    z-index: 100300;
}
    
    

    
    .mobcanv{
    height:240px;
    width:100%; 
    overflow : auto;
    
}
    
    
    .tabs {
        z-index: 1;
        background:#282B2F;
        position: sticky;
  top: 125px;
    overflow: auto;
            overflow-y: hidden;
    white-space: nowrap;
     justify-content: center;
     margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
  width: 100%;
    height:30px;
    border-bottom:2px solid #4E40AD;
    padding-top:8px;
    margin-bottom:30px;
    border-radius: 10px
}
    
    
.tabs .tab {
    
    
    overflow: auto;
            overflow-y: hidden;
    border-top:2px solid #404245;
    border-radius: 10px 10px 0 0;
    
    height:30px;
    line-height:30px;
    background:#2E3135;
    color:#fff;
    padding:0 11px;
    margin-right:4px;
    cursor:pointer;
    text-transform:uppercase;
    font-weight:bold;
    font-size:7pt;
}
    
.hidmob {
    visibility: hidden;
    display: none;
}


    
#canvas {
    z-index: 1;
    position: sticky;
  top: 0;
     transform-origin: top left;
    margin-right:50%;
    margin-left:50%;
    border-radius: 20px;
    display:block;
    margin: 0 auto;
    box-shadow: 0 0 0 1px #aaa;
    box-sizing:border-box;
}}