* {
  box-sizing: border-box;
}

/* Use a media query to add a break point at 800px: */

.th-header{
  border:1px solid #aaaaaa;
  background-color: #ACC5FF;
  font-weight: bold;
  padding:7px;
  margin:7px;
}

.themes-sub-header{
  border:1px solid #aaaaaa;
  padding:7px;
  margin-top:5px;
  margin-left:-20px;
  background-color:#FFFA9F;
}

.const-themes-list{
  list-style-type:none;
}

.const-themes-list li{
  border:1px solid #aaaaaa;
  padding:7px;
  margin-top:5px;
  margin-left:-7px;
  background-color:white;
}

.const-pupil-list{
  display:inline-block;
  border:1px solid #999999;
  width:100%;padding:10px;
  vertical-align:top;
  background-color:#3F7DE8;
  text-align:center;
}

.const-auth{
  display:inline-block;
  border:1px solid #999999;
  width:100%;padding:10px;
  background-color: #3F7DE8;                      /*#79E2C2;*/
  text-align:center;
  margin-bottom: 5px;
  color: white;
  font-weight: bold;
  cursor:pointer;
  min-height:50px;
  vertical-align: middle;
}

.videoinstruction{
  display:inline-block;
  border:1px solid #999999;
  width:100%;padding:10px;
  background-color:#3F7DE8;
  text-align:center;
  margin-bottom: 5px;
  color: white;
  font-weight: bold;
  cursor:pointer;
  min-height:50px;
  vertical-align: middle;
}

.videoinstruction:hover{
  background-color: black;
}

.const-user{
  display:inline-block;
  border:1px solid #999999;
  width:100%;padding:10px;
  background-color:#FFFED2;                     /*#B5F3E1;*/
  text-align:center;
  margin-bottom: 5px;
  color: black;
  font-weight: bold;
  min-height:50px;
  vertical-align: middle;
  font-size:17px;
  font-weight:normal
}

.const-auth:hover{
  background-color:#B5F3E1;
  color:black;
}

.const-pupil-list textarea{
  width:100%;
  height:150px;
  overflow-y:scroll;
  border:1px solid 0000bb;
  background-color:#ffffff;
}

.const-content{
  display:inline-block;
  border:1px solid #999999;
  width:77%;padding:10px;
  vertical-align:top;
  background-color:#3F7DE8;
  color:white;
}

.const-tasks{
  width:100%;
  height:350px;
  background-color:#eeeeee;
  margin-bottom:10px;
  margin-top:17px;
  overflow-y:scroll;
  color:black;
  /*padding-left:20px;*/
}

.const-options{
  width:100%;
  height:100px;
  background-color:#eeeeee;
  padding:10px;
  margin-top:10px;
  color:black;
}

.const-header {
  display:inline-block;
  width:93%;
  text-align:center;
  background-color:#3F7DE8;
  padding:10px;
  margin-top: 0px;
  font-family:Arial;
  color:white;
  font-stretch:semi-condensed;
  font-weight:bold;
  font-size:18px;
  border-bottom:2px solid #ffffff;
  margin-bottom:3px;
  font-size:25px;
}

.const-menu {
  display:inline-block;
  width:15%;
  height: 100%;
  text-align:center;
  vertical-align: top;
  /*background-color:#7CB2F0;*/
  background-color:  #FFFED2;               /*#3F7DE8;*/
  padding:10px;
  font-family:Arial;
  color:black;
  font-stretch:semi-condensed;
  border:1px solid #3F7DE8;
  font-weight:bold;
  font-size:17px;
}

.const-menu-current {
  display:inline-block;
  vertical-align: top;
  width:15%;
  height: 100%;
  text-align:center;
  border:1px solid #3F7DE8;
  background-color: #3F7DE8;
  padding:10px;
  font-family:Arial;
  color:white;
  font-stretch:semi-condensed;
  font-weight:bold;
  font-size:17px;
}

.const-menu:hover {
  background-color:#B5F3E1;
}

.ege-base {
  display:inline-block;
  width:22%;
  text-align:center;
  background-color:#1087cb;
  padding:10px;
  font-family:Arial;
  color:white;
  font-stretch:semi-condensed;
  font-weight:bold;
  font-size:18px;
  border-bottom:2px solid #ffffff;
}

.ege-base:hover{
  background-color:black;
}

.content {
  display:inline-block;
  width:69%;
  text-align:left;
  background-color:#ffffff;
  padding:10px;
  font-family:Arial;
  color:black;
  font-stretch:semi-condensed;
  vertical-align:top;
  font-size:18px;
  border-bottom:2px solid #ffffff;
}

.right {
  display:inline-block;
  width:20%;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  font-family:Arial;
  color:black;
  font-stretch:semi-condensed;
  border-left:1px dashed #aaaaaa;
  vertical-align:top;
  margin-top:-2px;
}

.footer{
  background-color:#1087cb;
  text-align:center;
  padding:10px;
  margin-top:7px;
  width:89%;
  margin:0 auto;
  font-family:Arial;
  color:white;
  font-stretch:semi-condensed;
  font-weight:bold;
  font-size:18px;
}

.bigbody{
  overflow-y: hidden;
  margin-top:0px;
  padding-top:0px;
}

.left-container{
  width:22%;
  display:inline-block;
}

.const-menu-line{
  min-height:43px;vertical-align:top;
}

.gotocomp{
  display: none;
  text-align: center;
  margin-top: 10px;
}

@media only screen and (max-width:800px) {
  /* For mobile phones: */
  .mainMenu, .ege-base, .content, .right, .footer, .table-task, .const-menu, .const-menu-current,
  .const-header, .const-pupil-list, .const-content, .left-container {
    width:100%;
	margin-left:0px;
	margin-right:0px;
  }
  .bigbody{
    overflow-y: scroll;
  }
  .const-menu-line{
    height:auto;
  }
  .mainMenu{
    flex-direction: column;
    width:100%;
  }
  .mainMenu .mainMenu__item{
    width: 100%;
  }
  .mainMenu .mainMenu__item-current{
    width: 100%;
  }
  .gotocomp{
    display: block;
  }
  .rightLink{
    display: none;
  }
}



h1{
  font-family:Arial;
  color:black;
  font-stretch:semi-condensed;
  color: black;
  font-size:22px;
}

h2{
  font-family:Arial;
  color:black;
  font-stretch:semi-condensed;
  color: black;
  font-size:18px;
}

.vert_menu_elem{
  text-align:left;
  font-size:16px;
  margin-bottom:10px;
  background-color:#1087cb;
  padding:10px;
  color:white;
  text-decoration:none;
}
.right a{
  color:black;
  text-decoration:none;
}

.right a:hover{
  color:white;
}

.vert_menu_elem:hover{
  text-align:left;
  font-size:16px;
  margin-bottom:10px;
  background-color:black;
  color:white;
  padding:10px;
}

.spoiler_body {display:none; cursor:pointer;}

.div-spoiler{
  background-color:#eeeeee;
  border:1px solid #cccccc;
  padding:10px;
  margin:7px;
  margin-left: 15px;
}
.div-spoiler a{
  color:black;
  text-decoration: none;
  border-bottom: 1px dashed black;
}

.div-spoiler a:hover{
  color:blue;
  text-decoration: none;
  border-bottom: 1px dashed blue;
}

.div-non-spoiler{
  background-color:#eeeeee;
  border:1px solid #cccccc;
  padding:10px;
  margin:7px;
}
.div-non-spoiler a{
  color:black;
  text-decoration: none;
  border-bottom: 1px dashed black;
}

.div-non-spoiler a:hover{
  color:blue;
  text-decoration: none;
  border-bottom: 1px dashed blue;
}

.chatternLink{
  font-family: monospace;
  background: #5786ff;
  color: white;
  padding: 3px 8px;
  text-decoration: none;
  float: right;
  transition: all 0.3s;
}

.chatternLink:hover{
  background: #eeeeee;
  color: rgb(0, 0, 200);
}

li a{
  color: #0865a9;
  text-decoration: none;
  border-bottom: 1px dashed #0865a9;
}

li a:hover{
  color: red;
  border-bottom: 1px dashed red;
}

a{
  color:blue;
}
a:hover{
  color:red;
}

.table-task {
  width: 100%;
  border-collapse: collapse;
}

.table-task td{
  border:1px solid #000000;
  padding:10px;
}

katex-element{
  display:inline-block;
}

img{
  max-width: 100%;
}

.spoiler_body ul{
  padding-top:3px;
  margin-top: 3px;
  padding-bottom:3px;
  margin-bottom: 3px;
}

.spoiler_body ul li{
  padding:3px;
}

.watchvideo{
  width:300px;
  height:50px;
  margin:0 auto;
  background-color:#1087cb;
  text-align:center;
  vertical-align:middle;
  display:block;
  margin:0 auto;
  padding-top:8px;
  margin-top:15px
}
.watchvideo a{
  color:white;
  text-decoration: none;
  border-bottom: 1px dashed #ffffff;
  font-weight: bold;
  font-size: 25px;
}

.watchvideo a:hover{
  color:yellow;
  border-bottom: none;
  font-size: 26px;
}

.header-block{
  display:inline-block;
  padding:10px;
  background-color: #cdcdef;
  margin-right:10px;
  margin-top: 10px;
  border:1px solid #0000ff;
}

.header-block a{
  color:black;
  text-decoration: none;
  border-bottom:1px dashed #000000;
}

.header-block a:hover{
  color: blue;
  border-bottom: 1px solid blue;
}

.const-button-minus{
  border:1px solid #555555;
  border-right:none;
  cursor:pointer;
  height:30px;
}

.const-text-counter{
  width:25px;
  border:1px solid #555555;
  border-left:none;
  border-right:none;
  text-align:center;
  height:30px;
}

.const-button-plus{
  border:1px solid #555555;
  cursor:pointer;
  border-left:none;
  height:30px;
}

#zatemnenie {
  background: rgba(102, 102, 102, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#const-okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #fff;
}

#const-zatemnenie:target {display: block;}
.close {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  padding: 0 12px;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor:pointer;
}

.const-close:hover {background: #e6e6ff;}

/************ Всплывающее окно ****************/

.blokno {text-align:center; position: fixed; top: 100px; left:50%; margin-left:-200px; width: 400px; font-family: Arial; background:#f0f0f0; z-index:999999; box-shadow: 0px 0px 10px rgba(0,0,0,0.8); display: none;}
.blokno .bloknohead {text-align:center; background: #009ce6; padding: 10px; margin:0; font-size:23px; color: #fff;}
.blokno .bloknomain {text-align:center; background: #fff; padding: 20px 10px;}
.blokno .bloknofoot {text-align:center; background: #EAEAEC; padding: 10px; font-size: 14px;}
.blokno .bloknoclos {text-align:center; position: absolute; width: 25px; height: 25px; right: -25px; margin-top: -25px; cursor: pointer; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAllJREFUeNqclk+IjWEUxp873eHOdUmmpoxiLBT5F2rYjEwNU2aEZDO6G2EzpVuUhWZDVqwsWNhcG6wslGliklKjkclMhI00mi6RzaQho/nZnK+O1/ePr95u5zzPc877nfe857sFQDmePZL2SuqU1CHpi6RxSQ8ljUhaSFUDSasDuM3fz1yMbxToc9omYLn9JiYZcgEeA+eADQFnHVAD7jvuTaDF8MVAAWiOS1A3wVNgc8qb+rUGeGC690Crw1pC8j0jDiUEK0QlSFgnTT8DFCO/J1w3wpmcu09a+1yZ/0iy04CRQLADWJUjcCewxdlXLN4Jn2TGnEsD8Udg3g4xKcF+094K/J+A2SjJaiNdjQnQZ9izhAS9hr8B2gOsZtiAgEtmbE0IdNjw4cDfY/63Cc3QaviEgFdmRGARaA4EVeNcM3u32a8zzmo6Cgww5YBFCWdwwbh3gV/ApLV0WpIbPslwzvaMLlwjJ/8iQJONsFKOIdktqUfSnKSVkg7k0LRFA/Ib8DXnBXtiXTRmdleGbiwq1x0TtCUQDxr+PPA3zL/NjZxQ+x34EN1WgMEY0jHDxmOwFcBPa4L1MXi/aWtyh/85IA24EiWVY60b80sCbMr85chxOmb6HrEWzOqgqpW8FDMp6uEUnjZgU0bQrLtRsjizQDlMcty9evt/jvmK2+x285VDUrdLVP3HBL3AD9P2++99HHkj8M7IL63rKimlOwo8cps75LAioELKX6LLks46e1TSpKR5SUVJuyR1Obwu6bykhtkFWwtZB1sBTgEviH8m7E2XpZSx6fcAROUScUv34UYAAAAASUVORK5CYII=') no-repeat;}
.blokno .bloknoclos:hover {opacity: 0.7;}
.bloknobg {position: fixed; top:0; left:0; width:100%; height: 100%; background: rgba(30,30,30,0.8); z-index:99999; display: none;}

/**************************************************/
a.butt {
        text-align:center;
        font-size:13px;
        text-decoration: none;
        font-weight: 700;
        padding: 3px 6px;
        background: #eaeef1;
        display:inline-block;
        width:60px;
        margin: 20px auto;
        background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.1));
        border-radius: 3px;
        color: rgba(0,0,0,.6);
        text-shadow: 0 1px 1px rgba(255,255,255,.7);
        box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.7);
        cursor:pointer;
}

a.butt:hover, a.butt.hover {
        background: #fff;
}
a.butt:active, a.butt.active {
        background: #d0d3d6;
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,0));
        box-shadow: inset 0 0 2px rgba(0,0,0,.2), inset 0 2px 5px rgba(0,0,0,.2), 0 1px rgba(255,255,255,.2);
}
/*****************************************************************/
.button-auth{
  display:block;
  width:100%;
  padding:10px;
  border:1px solid #000000;
  margin-bottom:5px;
  cursor:pointer;
  background-color:#79E2C2;
  transition: all 0.3s;
}

.button-auth:hover{
  background-color: #efefef;
}

.atanas-task{
	display:inline-block;
	font-size:12px;
	padding:7px;
	margin-bottom:5px;
	margin-right:0px;
	margin-left:0px;
	background-color:#eeeeee;
	border:1px solid #aeaeae;
	color:#444444;
	width:60px;
	text-align:center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	outline:none;
}

.atanas-task:hover{
	display:inline-block;
	font-size:12px;
	padding:7px;
	background-color:#ffffff;
	border:1px solid #aeaeae;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	outline:none;
}

.atanas-task:active{
	display:inline-block;
	font-size:12px;
	padding:7px;
	background-color:#ffffff;
	border:1px solid #aeaeae;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	outline:none;
}

.card-instruction{
  border:1px solid #999999;
  background-color:#ffffff;
  padding:10px;
  margin-bottom:10px;
  margin-left:15px;
  width:100%;
}
.card-subinstruction{
  border:1px dashed #888888;
  background-color:#ffffff;
  padding:10px;
  margin:10px;
  width:94%;
}

.card-subinstruction h3{
  margin:0px;
  font-size:14px;
}

.main-content{
  border:0px solid #cccccc;
  margin-bottom:10px;
  width:100%;
  margin-top:-10px;
}

/************************** colorbox ********************************************/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(/constructor/images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/constructor/images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/constructor/images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/constructor/images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/constructor/images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/constructor/images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/constructor/images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/constructor/images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(/constructor/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/constructor/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/constructor/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/constructor/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/constructor/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.checkselect {
	position: relative;
	display: inline-block;
	min-width: 250px;
	text-align: left;
}

.checkselect-control {
	position: relative;
	padding: 0 !important;
}
.checkselect-control select {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0;
	padding-left: 5px;
	height: 30px;
  background: #efefef;
}
.checkselect-over {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
}
.checkselect-popup {
	display: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	max-height: 200px;
	position: absolute;
	top: 100%;
	left: 0px;
	/*border: 1px solid #dadada;*/
  border: 1px solid #aaaaaa;
	border-top: none;
	background: white;
	z-index: 9999;
	overflow: auto;
	user-select: none;
  box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
.checkselect label {
	position: relative;
	display: block;
	margin: 0;
	padding: 4px 6px 4px 25px;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.1;
	cursor: pointer;
}
.checkselect-popup input {
	position: absolute;
	top: 5px;
	left: 8px;
	margin: 0 !important;
	padding: 0;
}
.checkselect-popup label:hover {
	background: #03a2ff;
	color: #fff;
}
.checkselect-popup fieldset {
	display: block;
	margin:  0;
	padding: 0;
	border: none;
}
.checkselect-popup fieldset input {
	left: 15px;
}
.checkselect-popup fieldset label {
	padding-left: 32px;
}
.checkselect-popup legend {
	display: block;
	margin: 0;
	padding: 5px 8px;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.1;
}

.block-settings{
  margin: 10px;
  background: white;
  padding: 10px;
  border: 1px solid #999999;
  position: relative;
}

.block-settings__header{
  margin-bottom: 5px;
}

.block-settings__checkbox{
  margin-right: 30px;
  display: inline-block;
  user-select: none;
}

.block-settings__task{
  position: relative;
  min-height: 56px;
  border-bottom: 1px solid #aaaaaa;
  padding-top: 15px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
}

.block-settings__task:last-child{
  border-bottom: none;
}

.block-settings__label{
  width: 300px;
  margin-bottom: 15px;
}

.suget{
  position: relative;
  top: -3px;
  width: 260px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.settings-header{
  padding: 2px 15px 0px;
  line-height: 1.5;
}

.thesame{
  transition: all 0.3s;
}

.btn-generate-kim{
  margin-left: 15px;
  padding: 10px;
  display: inline-block;
  border: 1px solid #aaaaaa;
  background: #cefccc;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-generate-kim:hover{
  background: #716dff;
  color: white;
  /*transform: scale(1.02);*/
}

.sovet{
  margin: 10px 0 0 10px;
}

:active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

.kim-block-header{
  background: #ececec;
  padding: 10px;
}

.block-settings__radio{
  display: inline-block;
  margin:0;
}

.block-settings__radio input{
  display: none;
}

.block-settings__radio label{
  display: inline-block;
  cursor: pointer;
  padding: 0px 15px;
  line-height: 34px;
  border: 1px solid #999;
  user-select: none;
  margin-left: -1px;
}

.block-settings__radio input[type=radio]:checked + label {
	background: #ffe0a6;
}

.block-settings__radio label:hover {
	color: #666;
}

.block-settings__radio input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}

.block-settings__radio-container{
  display: flex;
  flex-wrap: wrap;
}

label{
  user-select: none;
}

.instruction-text{
  background-color: #fff;
  line-height: 1.5;
  margin-top: 15px;
  padding: 10px 15px;
  border: 1px solid #cccccc;
}

.instr-quote{
  border-left: 3px solid #999999;
  padding-left: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

.mainMenu{
  display: flex;
  width: 92%;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
}

.mainMenu__item{
  /*width: calc(13% - 5px);*/
  flex-grow: 1;
  flex-basis: 0;
  list-style-type: none;
  border: 1px solid #000;
  margin: 0px 2px;
  background-color: #FFFED2;
  font-family: Arial;
  color: black;
  font-stretch: semi-condensed;
  border: 1px solid #3F7DE8;
  font-weight: bold;
  font-size: 17px;
  position: relative;
  transition: all 0.3s;
}

.mainMenu__item:hover{
  background-color:#B5F3E1;
}

.mainMenu__item a{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  text-decoration: none;
  border-bottom: 0;
  color: #222222;
}

.mainMenu__item a:hover{
  border-bottom: 0;
  text-decoration: none;
  color: #222222;
}

.mainMenu__item-current{
  flex-grow: 1;
  flex-basis: 0;
  list-style-type: none;
  border: 1px solid #000;
  margin: 0px 2px;
  background-color: #FFFED2;
  font-family: Arial;
  font-stretch: semi-condensed;
  font-weight: bold;
  font-size: 17px;
  position: relative;
  border:1px solid #3F7DE8;
  background-color: #3F7DE8;
}

.mainMenu__item-current a{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  text-decoration: none;
  border-bottom: 0;
  color: white;
}

.mainMenu__item-current a:hover{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  text-decoration: none;
  border-bottom: 0;
  color: white;
}


.mainMenu__item .mainMenu__submenu{
  display: none;
  position: absolute;
  width: calc(100% + 2px);
  padding: 0;
  left: -3px;
  top: 35px;
  padding-top: 5px;
  z-index: 9999;
}

.mainMenu__item-current .mainMenu__submenu{
  display: none;
  position: absolute;
  width: calc(100% + 2px);
  padding: 0;
  left: -3px;
  top: 35px;
  padding-top: 5px;
  z-index: 9999;
}

.mainMenu__submenu .mainMenu__item{
  width: 100%;
  transition: all 0.3s;
  margin-top: -1px;
}

.mainMenu__item:hover .mainMenu__submenu{
  display: block;
}

.mainMenu__item-current:hover .mainMenu__submenu{
  display: block;
}

.mainMenu__item-current:hover .mainMenu__submenu a{
  color: #222222;
}

.mainMenu__link::after{
  content: '→';
  display: inline-block;
  margin-left: 5px;
}

.mainMenu__link:hover::after{
  /*transform: rotate(90deg);*/
  transition: all 0.3s;
}

.btnSelectSubmit{
  font-family:Arial;
  font-stretch:semi-condensed;
  font-size:17px;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: 10px;
  border: 1px solid #aaaaaa;
  background: #cefccc;
  transition: all 0.3s;
  height: 30px;
  display:inline-block;
}

a.btnSelectSubmit{
  border-bottom: 1px solid #aaaaaa;
  margin: 0;
}

a.btnSelectSubmit:hover{
  border-bottom: 1px solid #aaaaaa;
  background: #716dff;
  color: white;
}


.btnSelectSubmit:hover{
  background: #716dff;
  color: white;
  /*transform: scale(1.02);*/
}

.selectCounterLabel{
  margin-left: 20px;
  display: inline-block;
  position: relative;
  top: -1px;
}

.selectCounter{
  display: inline-block;
  position: relative;
  top: -1px;
  margin-left: 5px;
}

.selectOr{
  display: inline-block;
  margin: 0 10px;
}

.selectAnswer{
  display: inline-block;
  padding: 10px;
  margin-right: 10px;
}

.ogeSelectThemeName {
  font-weight: bold;
  font-size: 20px;
  font-family: Arial;
  margin-bottom: 20px;
  margin-top: 20px;
  background-color: #dfdfdf;
  padding: 10px;
  display: none;
  width: 100%;
}

.selectAnswersHeader {
  font-weight: bold;
  font-size: 20px;
  font-family: Arial;
  margin-bottom: 20px;
  margin-top: 20px;
  background-color: #dfdfdf;
  padding: 10px;
  display: inline-block;
  width: 100%;
}

.ogeSelectTask{
  margin-left: 20px;
  width: calc(100% - 21px);
}

.ogeSelectTaskNumber{
  width: 50px;
  padding: 5px;
  border: 1px solid #000;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.ogeSelectTaskText{
  display: inline-block;
  width: calc(100% - 70px);
  margin-left: 10px;
  min-height: 40px;
}

.ogeSelectTaskTitle{
  font-weight: bold;
  font-size: 15px;
  font-family: Arial;
  margin-bottom: 20px;
  margin-top: 5px;
}

.selectMainContainer{
  width: 800px;
  margin: 0 auto;
}

.selectAnswerBlock{
  border: 1px solid #000;
  display: inline-block;
}

.ogeSelectTaskFull{
  display: block;
  vertical-align: top;
  width: 100%;
}

.shk_this {
  transform: translate3d(0, 0, 0);
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
  width: 100%;
  height: 100%;
}

@keyframes shakeMe {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }

  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}

.container{
  width: 800px;
  margin: 0 auto;
  font-family: Arial;
  font-stretch:semi-condensed;
  font-size: 18px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 100%;
}

.tariff__li{
  background: #eeeeee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

#gir {
	position: absolute;
	top: 0;
	left: 0;
	background-image:url('/constructor/images/gir.png');
	height: 62px;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none
}
.gir_1 {
	background-position: 0 0
}
.gir_2 {
	background-position: 0 -62px
}
.gir_3 {
	background-position: 0 -124px
}