.mainContainer{
padding-top:1rem!important;
padding-bottom:1rem!important
}
.logoImg{
width:250px;
height:75px;
display:inline;
margin-right:4px;
}
.login-button {
display:inline-table;
color:#0099FF;
background:none;
font-size:normal;
border: none;
border-bottom: 1px dotted #0099FF;
}
/*модальное окно */
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:97;
    background-color:#111;
    display:none;
    }
	
#tg-login{
	z-index:98;
}

#tg-login .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;

	
    height:344px;
/*    display:none; */
    z-index:98;
    padding: 20px;
    overflow: hidden;
    }
#tg-layout {
	display: none;
}
#tg-login #tg-layout {

    height:344px;
    background-color: #ffffff;
/*	background: url(/img/waiting-for-widget.gif) left top; */
	border-radius: 3px; 

    }  
	
#widget {
/*	width: 200px; */
	margin : 0 auto;
/*    padding-top: 100px; /* было 106 */ 
	text-align: center;
	background: url(/img/progress-widget.svg);
	background-repeat:no-repeat;
	background-position: 50% 130px;
}

#widget_logo{
height:150px;
width:182px;
margin: 0 auto 8px;
	background: url(/img/logo_widget.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center;
}

.no-svg #widget { 
	background: url(/img/progress-widget.gif);
}
.no-svg #widget_logo { 
	background: url(/img/logo-widget.png);
}

#or{
	border-top: 1px solid #cbd2d6;
    position: relative;
    margin: 25px 0 10px;
    text-align: center;
	box-sizing: border-box;
	display:block;
}
.textInSeparator{
background-color: #fff;
padding: 0 .5em;
position: relative;
color: #6c7378;
top: -.7em;
}
#topLine{
	border-top: 3px solid #cbd2d6;
    text-align: center;
	box-sizing: border-box;
	display:block;
	height:64px;
	margin-top:20px;
}
#tg-signup{
text-align:center;
}
#tg-signup a{
border-bottom:dotted 1px;
color:#0066FF;
}
#loading-indicator-mask {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position:fixed;
  display:none;
  background:#FFF;
  z-index:99;
}
#loading-indicator {
  width: 100%;
  height: 100%;
  opacity: 1.0;
  position:fixed;
  display:none;
  background-image:url(/img/loading_indicator2.svg);
  background-repeat:no-repeat;
  background-position: 50% 50%;
  z-index:100;
}
.compareTable{
width: 100%;
background: white; 
border-collapse: separate;
border-radius:6px;
}

.topTh{
border: none !important;
}


.compareTable td{
padding: 3px 8px;
}

.compareOptionTable {
width: 100%;
border:#CCCCCC 1px solid;
border-collapse: separate;
border-radius:6px;
margin:10px;
}

.compareTable th, .compareOptionTable th{
color: #FFFFFF;
font-weight:bold;
text-align:center;
padding: 8px 1px;
}

.compareTable th, .compareOptionTable th{
border: none;
}
.compareTable thead tr:first-child th:last-child{
border-radius: 0 6px 0 0;
}
.compareTable tbody tr:nth-child(odd) {
background:#F5F5F5;
}
.compareOptionTable thead tr th{
border-radius: 6px 6px 0 0;
}
.compareOptionTable tbody td {
text-align: left;
border: none !important;
padding: 10px 15px;
font-size: 14px;
vertical-align: top;
line-height: 1.1;
}
.compareOptionTable tbody tr:nth-child(odd) {
background:#F5F5F5;
}
.compareOptionTable tbody tr:last-child td{
border-bottom: 1px solid #CCCCCC;
}
.compareOptionTable tbody tr:last-child td:first-child {
border-radius: 0 0 0 6px ;
}
.compareOptionTable tbody tr:last-child td:last-child {
border-radius: 0 0 6px 0 ;
}
.startPlanButton, .basePlanButton, .proPlanButton, #saveLessonButton{
cursor:pointer;
}
.th2, .startPlanButton{
background: #FFCE18;
}
.th3, .basePlanButton{
background: #189CC6;
}
.th4, .proPlanButton{
background: #E62D00;
}
.startPlanButton:hover{
background: #ffda53;
}
.basePlanButton:hover{
background: #52b5d4;
}
.proPlanButton:hover{
background: #ec6240;
}
.noBg{
background: none !important;
}
.price{
font-weight: bold;
}
.getButton {
border: 1px solid #CCCCCC;
border-radius: 4px;
color: #FFFFFF;
font-weight: bold;
padding: 8px 16px;
}
.wideScreen{
display: none;
}
.narrowScreen{
display: block;
}
.tdOpt{
text-align:center !important;
}

.trainerDashboard, .lessonDashboard{
width:100%;
min-width:348px;
}
.panelCol2{
min-width:348px;
margin-bottom:12px;
}
.trainerLabel{
display:inline;
height:24px;
}
#trainerList_trainerName .trainerLabel{
font-weight: 800;
}
#trainerLabelValue{
height:24px !important; 
font-size: 24px !important;
font-weight:600 !important;
pointer-events:none;
}

.icon{
width:24px;
height:24px;
display:inline-block;
margin-left:8px;
cursor:pointer;
vertical-align: middle;
}
.addIcon{
background-image:url(/img/add_icon.svg);
}
.editIcon{
background-image:url(/img/edit_icon.svg);
}
.copyIcon{
background-image:url(/img/copy_icon.svg);
}
.iconInactive{
filter: grayscale(100%);
cursor:auto !important;
}

#trainer_on_off_toggler{
margin-bottom:12px;
}
#trainer_status{
display:inline;
font-size: 16px;
font-weight:500;
margin-left: 8px;
height:24px;
}
.trainer_status_working{
color: #1fb232;
}
.trainer_status_notWorking{
color:#888888;
}
.omniBotLabel{
display:block;
font-size:12px;
color:#0078d7;
}
.dashboardOtionItem{
font-size:16px;
height:24px;
font-weight:500;
}

#trainer_on_off_toggler, #trainer_bot_address {
display: none;
}

#trainer_bot_address, #invite_code {
margin-top:12px;
}
#bot_address{
color:#0078d7;
margin-left:8px;
}
.editableInput{
border:none;
font-size:1em !important;
font-weight:normal !important;
}
.editableInput::placeholder {
color:gray;
font-style:italic;
font-size:0.9em;
padding-left:10px;
}
#newLessonForm .colLeft ::placeholder {
color:gray;
font-style:italic;
font-size:0.9em !important;
padding-left:10px;
font-weight:300 !important;
}
.pairedButtons{
text-align:center;
}
.pairedButtons input[type="button"]{
margin:5px 10px;
}
.inviteCode{
color:#0078d7;
}

.dashboardOptionHeader{
font-size:24px;
height:24px;
font-weight:500;
}

.dashboardOptionItems{
margin-top:12px;
}

#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }
.popUp_window {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 450px;
	margin-left: -225px;	
    display:none;
    z-index:9999;
    overflow: hidden;
    background-color:#ffffff;
	font-size:18px;
    }  
	
.header_blue{
background:#0078d7;
}
.header_red{
background:#ec233b;
}	

.popUp_top {
    width:100%;
/*    background:#177998; */
	color:#FFFFFF;
    padding:16px;
	font-weight:bold;
	font-size:15px;
	text-align:center;
    }
.popUp_close {
    margin:10px auto;
	font-size:15px;
	font-weight:bold;
	border-bottom:1px dashed;
	cursor:pointer;
    }
.popUp_content {
    padding: 20px 20px 10px;
	font-size:14px;
	text-align:center;
}

#selectBotForm input{
display:block;
margin: 15px auto;
}

.lesson_conceptSelectBlock, .lesson_taskFormulationBlock{
font-size: 0.85em;
margin: 0.5em 0;
}
.lesson_conceptSelectBlock select, .lesson_taskFormulationBlock select{
font-size: 0.9em;
font-style:italic;
}
.lessonTask {
margin-bottom:7px;
}
.lessonTask input[type="text"]{
border: 1px solid #DDDDDD;
border-radius: 0.15rem;
background-color:#FFFFFF;
font-size:1rem !important;
height: calc(1.8rem + 2px);
}
.inputVerified{
background-color:#EFFEE9 !important;
}
.taskArrow {
display:inline;
margin:0;
height: 1.2rem;
width: auto;
vertical-align:middle;
}
.hidden{
display: none;
}
.gradient-custom {
/* fallback for old browsers */
background: #0078d7;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right bottom, rgba(0, 120, 215, 1), rgba(0, 80, 233, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right bottom, rgba(0, 120, 215, 1), rgba(0, 80, 233, 1))
}
#teacherAboutTA {
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
#addLessonIntro{
font-size:0.85em;
margin: 0.5em 0;
}
#addLessonIntro input[type="checkbox"]{
margin-left:0 !important;
}
#lessonIntro{
}
#lessonIntroTA{
border:1px solid #999999;
width:80%;
margin:5px 0;
padding:1%;
}
#lessonName{
width:80%;
font-size: 0.85em !important;
}
.profileOption{
font-size:0.8em;
}
.profileOptionValue{
font-size:0.8em;
font-weight:normal;
}
.profile_teacherName{
font-size:0.9em !important; 
font-weight:500 !important;
}
.profile_teacherName input{
width:92%;
margin:0 auto;
font-size:0.8em !important;
}
.profile_teacherName input[type="text"]{
}
#updateTeacherName, #saveSettings, #loadingSpinner{
text-align:center;
display:none;
}

#saveSettings input{
font-size: 0.8em !important;
}

.ml-10{
margin-left:10px;
}

#loadingSpinner{
width: 24px;
height: 24px;
margin:0 auto;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
.wideScreen { display: block;}
.narrowScreen {display: none;}
.tdOpt{width: 150px;}
.panelCol2{float:left;}
.colLeft{width:45%;}
.colRight{width:55%;}
}
@media (max-width: 768px) {
.lessonTask input[type="text"]{
font-size:12px;
width:42%;
min-width:120px;
}

}
@media (min-width: 992px) {
.tdOpt{width: 220px;}
}
@media (min-width: 1200px) {
.tdOpt{width: 250px;}
}

@media screen and (max-width: 992px) {
	.popUp_window {
	position: absolute;
	top: 2%;
	left: 50%;
	width: 90%;
	margin-left: -45%;	
    display:none;
    z-index:9999;
    overflow: hidden;
    background-color:#ffffff;
	font-size:18px;
    }
	
	#trainerLabelValue{
	height:20px !important; 
	font-size: 20px !important;
	font-weight:600 !important;
	}
} 