﻿.oc_block {
    width: 100%;
    height: 100%;
    background: url('../images/m1.jpg') center no-repeat;
    background-size: cover;
}

.bg-lightseagreen {
    --bs-bg-opacity: 1;
    background-color: lightseagreen;
}


div.bkgnd {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0px;
    /*top: 0px;*/
    bottom: 0px;
    background-size: cover;
    background-position: center bottom;
}

.bk-1 {
    background: url('../images/msu1.jpg') no-repeat;
}
.bk-2 {
     background: url('../images/msu2.jpg') no-repeat;
}
.bk-3 {
     background: url('../images/msu3.jpg') no-repeat;
}
.bk-4 {
     background: url('../images/msu4.jpg') no-repeat;
}
.bk-5 {
     background: url('../images/msu5.jpg') no-repeat;
}

.top-panel {
    z-index: 10; position: fixed; top: 5px; left: 0px; width: 100%; height: 70px;
    background-color: #2c3e50;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
}

.menu-win {
    width: 260px; background-color: white; z-index: 10; position: fixed; top: 90px; left: -260px; height: 700px;
    opacity: 0.8;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
}

.menu-win ul {
    padding-left: 0px;
}

.content-wrapper {
    z-index: 5; 
    margin-left: 0px;
    margin-top: 90px;
    position:relative;
    width: calc(100% - 0px); 
    height: 600px;
    text-align: center;
}

.content-win {
    z-index: 5; 
    position:relative;
    padding: 20px 50px 50px 50px;
    width: 800px; 
    
    margin: 0 auto;
    margin-bottom: 5px;
    background-color: #dedede; 
    
        -webkit-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    box-shadow: 3px 3px 5px 0px rgba(82,81,82,1);
    text-align: left;
    color: #333333;
}

.step-container {
    position: absolute;
    left: 2250px;
}

.top-left {

}

div.top-panel div {
    height: 100%;
    display: table-cell;
     vertical-align: middle;
}

.top-left {
    float: left;
}

.top-right {
    float: right;
}

.top-title {
    margin-left: 50px;
    font-family: "PT Sans";
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-top: 10px;
}

.top-subtitle {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-right: 20px;
    margin-top: 20px;
    color: white;
}


.show-menu-button {
    margin: 0px 0px 0px 15px;
    float: left;
    background:transparent url('../images/menu-filled-48.png') center center no-repeat;
    opacity: 0.8;
    height: 55px;
    width: 55px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.show-menu-button:hover {
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.settings-menu-button {
  
    float: left;
    background:transparent url('../images/settings-48.png') center center no-repeat;
    opacity: 0.8;
    height: 55px;
    width: 55px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.top-right.top-menu {
    background-color: #34495e;
}

.settings-menu-button:hover {
    opacity: 1.0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.content-test classTestFooter {
    width: 100%;
    height: 100px;
    left: 30px;
    background-color: green;
}

/* ПУНКТЫ МЕНЮ */

.title-menu {

}

div.menu-win ul {
     list-style-type: none;   
     margin-top: 50px;
     -webkit-padding-start: 0px;
}

div.menu-item {
    padding: 10px 10px 10px 40px;
}

div.menu-win ul li {
    background-color: white;
    margin-top: 2px;
    opacity: 1.0
}

.menu-item {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #333333;
    z-index: 100;
    position: relative;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+1,ffffff+3 */
    background: gray; /* Old browsers */
    background: -moz-linear-gradient(left,  gray 1%, #ffffff 3%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  gray 1%,#ffffff 3%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  gray 1%,#ffffff 3%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='gray', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.menu-item a {
    text-decoration: none;
    color: #333333;
}

.menu-item::before {
    background: linear-gradient(to right,  lightgray 97%, #ffffff 100%);
    opacity: 0;
    content: '';
    transition: opacity 0.5s ease-in-out;
     -webkit-transition: opacity 0.5s ease-in-out;
    z-index: -100;
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 100%;
}

.menu-item:hover::before {
    opacity: 1;
}

.menu-item.current {
    background: #e0e0e0;
    border-left: solid 7px #2c3e50;
}

div.menu-win ul li:active {
    background-color: gray;
}

.menu-comment {
    margin: 30px 20px 20px 20px;
    position: relative;
    color: black;
}


/* ГРИД */

.data-grid {
    width: 700px;
    table-layout: fixed;
    background-color: white;
}

.data-grid th {
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    border-bottom: solid 1px #333333;
    padding: 5px 5px 5px 5px;
}

td.truncated {
	width: 150px;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.data-grid .cell-control :hover {
    opacity: 1.0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.data-grid td {
    padding: 10px 5px 10px 5px;
    /*white-space: nowrap;*/
    word-wrap: break-word;
}

.data-grid tr.row-add td :hover {
	font-size: 16px;
}


.data-grid tr.selected td {
    background-color: lightgray;
}

.data-grid tr.selected td.cell-control img:before {
    content: "test";
}

.cell-control {
    background-color: #f0f0f0;
    text-align: right;
    width: 83px;
}

    /* Стили формы */

.label-error {
	font-color: red;
}

.form-note {
    font-size: 12px;
    font-weight: bold;
}

.form-style-1 {
    margin:10px auto;
    padding: 20px 12px 10px 20px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}

.form-style-1 label{
    margin:0 0 3px 0;
    padding:0px;
    display:block;
    font-weight: bold;
}

.validation-error {
	border: 1px solid darkred !important;
	background-color: #F0C0C0 !important;
}

div.selectize-input,
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}

div.selectize-dropdown,
div.selectize-input.focus,
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
    -moz-box-shadow: 0 0 8px #2c3e50;
    -webkit-box-shadow: 0 0 8px #2c3e50;
    box-shadow: 0 0 8px #2c3e50;
    border: 1px solid #2c3e50;
}
.form-style-1 .field-divided{
    width: 30%;
}

.form-style-1 .field-long{
    width: 100%;
}
.form-style-1 .field-select{
    width: 100%;
}
.form-style-1 .field-textarea{
    height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
    background: #4B99AD;
    padding: 8px 15px 8px 15px;
    border: none;
    color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
    background: #4691A4;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.form-style-1 .required{
    color:red;
}


/* Стили для selectize*/

.selectize-control.contacts .selectize-input > div {
			padding: 1px 10px;
			font-size: 15px;
			font-weight: normal;
		}
		.selectize-control.contacts .selectize-input > div.active {
			background: #0059c7;
			background: -moz-linear-gradient(top, #0059c7 0%, #0051c1 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0059c7), color-stop(100%,#0051c1));
			background: -webkit-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: -o-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: -ms-linear-gradient(top,  #0059c7 0%,#0051c1 100%);
			background: linear-gradient(to bottom,  #0059c7 0%,#0051c1 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0059c7', endColorstr='#0051c1',GradientType=0 );
			border-color: #0051c1;
		}
		.selectize-control.contacts .selectize-input > div .email {
			opacity: 0.8;
		}
		.selectize-control.contacts .selectize-input > div .name + .email {
			margin-left: 5px;
		}
		.selectize-control.contacts .selectize-input > div .email:before {
			content: '(';
		}
		.selectize-control.contacts .selectize-input > div .email:after {
			content: ')';
		}
		.selectize-control.contacts .selectize-dropdown .combobox-item-comment {
			font-size: 12px;
			display: block;
			color: darkgray;
		}
        .selectize-control.contacts .selectize-dropdown .combobox-item-title {
			font-size: 15px;
            display: block;
			color: #333333;
		}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}