/* CSS Document */
/* monitors and laptops */

.shablon
{
max-width: 100% !important;
padding: 2px 2px 2px 2px;
overflow: hidden;
}

@media screen and (min-width: 1024px)  {
.header{
	
width: 100%;
max-height: 100px;
height: 100%;	
background: #fff;	
border-bottom:1px solid #000000; 
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* ѕараметры тени */
}
.lefttd {
background: #fff;
margin-right: 10px;
max-width: 18%; 
width: 100%;
float: left; 	
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* ѕараметры тени */
margin-bottom: 10px;
}
.topcontent
{
float: left;
max-width: 81% !important;
width: 100%;
background: #fff;
height: auto;	
padding-bottom: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* ѕараметры тени */
margin-bottom: 10px;
overflow: hidden;
}

p.title_data {
background-color: #00BFFF;
color: #ffffff;
font-weight:bold;
margin:2px 2px 2px 2px;
padding:2px 2px 2px 2px;
padding-right: 2px;
width: 98%;

}
} 

/* mobile */
@media screen and (max-width: 768px) {
	.header{
max-width: 360px;	
width: 100%;
max-height: 100px;
height: auto;	
background: #fff;	


}
.header img {
max-width: 360px;		
height: auto;	
}
.lefttd {
background: #fff;
margin-right: 10px;
width: 100%;
float: left; 	
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* ѕараметры тени */
margin-bottom: 10px;
}
.topcontent
{
float: left;
max-width: 100% !important;
width: 100%;
background: #fff;
height: auto;	
padding-bottom: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* ѕараметры тени */
margin-bottom: 10px;
overflow: hidden;
}
p.title_data {
background-color: #00BFFF;
color: #ffffff;
font-weight:bold;
margin:2px 2px 2px 2px;
padding:2px 2px 2px 2px;
padding-right: 2px;
width: 99%;

}	
	
}




.link1 
{
 color: grey;
 text-decoration: none;
font-size: 11px;
}

.link1 a: hover
{
 color: grey;
 text-decoration: underline;
font-size: 11px;
}

.main_border {border:1px solid #000000; max-width:100%; width: 100%; background: #FFFFFF;}
p {font-family:Verdana; font-size:12px; margin:15px;}
.left {background-color:#f6f6f6; border-right:1px solid #424242;}
body {  background-color: #00BFFF; }
.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}
.more-link {
    background: none repeat scroll 0 0 #232527;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    padding: 8px 18px;
    text-decoration: none;
    transition: background 0.1s linear 0s;
	width: 200px;
	height: 50px;
}
.more-link:hover {
    background: none repeat scroll 0 0 #F26C4F;
    color: #FFFFFF;
}
a.knopka {
  color: #fff; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: #8B7765; /* фон кнопки */
  padding: .7em 1.5em; /* отступ от текста */
  outline: none; /* убирать контур в Mozilla */
  width: 100px;
} 
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
p.title {
background-color: #00BFFF;
color: #ffffff;
font-weight:bold;
margin:5px;
padding:5px;
width: 92.5%;

}


#coolmenu{
border: 1px solid gray; /*—тиль рамки */
border-bottom-width: 0;
width: 94%; /*Ўирина меню */
background-color: #f6f6f6;  /*‘оновый цвет ¤чейки*/
margin:7px; /*Ўирина отступов*/
}

* html #coolmenu{ 
width: 150px;/*Ўирина меню дл¤ Internet Explorer*/
}

#coolmenu a{
font: bold 13px Verdana; /*Ўрифт текста*/
padding: 2px; /*¬нутренний отсутп текста ссылки от краев ¤чейки*/
padding-left: 4px;/*¬нутренний отсутп текста ссылки от левого кра¤ ¤чейки*/
display: block;
width: 200px; /*Ўирина ¤чейки*/
color: #000000;  /*?вет текста*/
text-decoration: none; /*ѕодчеркивание у ссылок - нет*/
border-bottom: 1px solid gray;
}


html>body #coolmenu a{ 
width: auto;
}

#coolmenu a:hover{
background-color: #cccccc; /*‘оновый цвет ¤чейки при наведение курсора*/
color: #000000;  /*?вет текста при наведении курсора*/
}
.selectedlink  {
background-color: #98FB98!important; /*‘оновый цвет ¤чейки при наведение курсора*/
color: #000000!important;  /*?вет текста при наведении курсора*/
}
#link1 
{
background-color: #f2f2f2;
}
#link2 
{
background-color: #f2f2f2;
}
.activelink{
background-color: #8FBC8F; /*‘оновый цвет ¤чейки при наведение курсора*/
color: #000000;  /*?вет текста при наведении курсора*/
}
p.title2 {
background-color: #C4C92F;
color: #ffffff;
font-weight:bold;
margin:5px;
padding:5px;
width: 100%;
}

.form1 {
font-family: Verdana;
font-size: 10px;
}

.form3 {
font-family: Verdana;
font-size: 11px;
}

.formm {
border: 1px solid #cccccc;
margin:5px;
}

.lesson {border:1px solid #cccccc; width:95%;}
.lesson_title {background-color:#f6f6f6;}

.lesson_name {font-weight:bold; margin-top:7px; margin-bottom:7px;}
.lesson_adds {font-size:11px; margin-top:7px; margin-bottom:7px; color:#424242;}

.view_title {font-size:16px; font-weight:bold; color:#cc0000; text-align:center;}
.view_date {font-size:11px; color:#424242; margin-top:7px; margin-bottom:7px; font-weight:bold;}

.tdbasetable {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 13px;
  background: white;
 
  width: 100%;
  height: auto;
  border-collapse: collapse;
  text-align: left;
}
.tdbase {
  background: #f6f6f6;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
  border-left: 5px solid #fff;
  color: #black;
  border-top: 1px solid transparent;
  padding: 2px 2px 2px 2px;
}
.tdbasetable td,tr {
	width: auto;
	height: auto;
}
	/*---------alert-----------*/

.alert_no {
  padding: 20px;
  background-color: #f44336;
  color: white;
}
.alert_ok {
  padding: 20px;
  background-color: #32CD32;
  color: white;
  z-index: 999;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
	/*---------textarea-----------*/
.textareastyle {
	width: 100%;
	min-height: 100px;
	height: auto;



}
	/*---------input-----------*/
.inputstyle {
	width: 100%;
	height: auto;
}

/*----------time line-----------*/
.timeline{
  --uiTimelineMainColor: var(--timelineMainColor, #222);
  --uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);

  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.timeline:before{
  content: "";
  width: 4px;
  height: 100%;
  background-color: var(--uiTimelineMainColor);

  position: absolute;
  top: 0;
}

.timeline__group{
  position: relative;
}

.timeline__group:not(:first-of-type){
  margin-top: 4rem;
}

.timeline__year{
  padding: .5rem 1.5rem;
  color: var(--uiTimelineSecondaryColor);
  background-color: var(--uiTimelineMainColor);

  position: absolute;
  left: 0;
  top: 0;
}

.timeline__box{
  position: relative;
}

.timeline__box:not(:last-of-type){
  margin-bottom: 30px;
}

.timeline__box:before{
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--uiTimelineMainColor);

  position: absolute;
  left: 0;
  z-index: -1;
}

.timeline__date{
  min-width: 65px;
  position: absolute;
  left: 0;

  box-sizing: border-box;
  padding: .5rem 1.5rem;
  text-align: center;

  background-color: var(--uiTimelineMainColor);
  color: var(--uiTimelineSecondaryColor);
}

.timeline__day{
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

.timeline__month{
  display: block;
  font-size: .8em;
  text-transform: uppercase;
}

.timeline__post{
  padding: 1.5rem 2rem;
  border-radius: 2px;
  border-left: 3px solid var(--uiTimelineMainColor);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
  background-color: var(--uiTimelineSecondaryColor);
}

@media screen and (min-width: 641px){

  .timeline:before{
    left: 30px;
  }

  .timeline__group{
    padding-top: 55px;
  }

  .timeline__box{
    padding-left: 80px;
  }

  .timeline__box:before{
    top: 50%;
    transform: translateY(-50%);  
  }  

  .timeline__date{
    top: 50%;
    margin-top: -27px;
  }
}

@media screen and (max-width: 640px){

  .timeline:before{
    left: 0;
  }

  .timeline__group{
    padding-top: 40px;
  }

  .timeline__box{
    padding-left: 20px;
    padding-top: 70px;
  }

  .timeline__box:before{
    top: 90px;
  }    

  .timeline__date{
    top: 0;
  }
}

.timeline{
  --timelineMainColor: #00BFFF;
  font-size: 16px;
}

/*
=====
DEMO
=====
*/

@media (min-width: 768px){

  html{
    font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
    font-size: 55%;
  }
}

body{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  font-size: 1.6rem;
  color: #222;

  margin: 0;
  -webkit-overflow-scrolling: touch;   
  overflow-y: scroll;
}

p{
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

p:last-child{
  margin-bottom: 0;
}

.page{
  max-width: 800px;
  padding: 1rem 2rem 3rem;
  margin-left: auto;
  margin-right: auto;
}

/* table */
.mobileTable
{

}
.cwdtable 
{
font-size:12px;
color:#333333;
width:99%;
border-width: 1px;
border-color: #00BFFF;
border-collapse: collapse;}
		.cwdtable th {color:#fff; font-size:12px;background-color:#00BFFF;border-width: 1px;padding: 8px;border-style: solid;border-right: #fff;}
		.cwdtable tr {background-color:#ffffff;}
		.cwdtable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #00BFFF;}
		.mobileTable {overflow:auto;width:100%}
		.cwdtable th,.cwdtable td{text-align:center}
		.cwdtable tr:hover {background-color:#ffffff;}


/* table 2*/
.tablecase {
  border-collapse: collapse;
  width: 100%;
  padding: 2px 2px 2px 2px;
  margin: 2px 2px 2px 2px;
}

.tablecase th, td, tr {
	float: center;
	width: auto;
	height: auto;
  border-bottom: 1px solid #ddd;
}
/*================alert====================*/
.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	width: 98%;
	min-height: 55px;
	padding: 2px 2px 2px 2px;
	height: auto;
	}
.alert-info {
	color: #fff;
	background-color: #00E0FF;
	border-color: #ebccd1;
	width: 98%;
	min-height: 55px;
	padding: 2px 2px 2px 2px;
	height: auto;
	}	
	
	
.alert-danger hr {
	border-top-color: #e4b9c0;
	}
	
/*===================stikres========================*/
.stikers {
	
  margin:0;
  padding:0;
}

.stikers h2,p{
  font-weight:normal;
}
.stikers ul,li{
  list-style:none;
  
}
.stikers ul{
  overflow:hidden;
  padding:3em;
}
.stikers ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:auto;
  width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
.stikers ul li{
  margin:1em;
  float:left;
}
.stikers ul li h2{
  font-size: 11px;
  font-weight:bold;
  padding-bottom:2px;
}
.stikers ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:15px;
overflow: hidden;
}
.stikers ul li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
.stikers ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
.stikers ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
.stikers ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
.stikers ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
.stikers ol{text-align:center;}
.stikers ol li{display:inline;padding-right:1em;}
.stikers ol li a{color:#fff;}	
	
	
	/*-----*/
.avatar_view_client
{
max-width: 250px;
width: 100%;
height: auto;	
}