﻿/* DEFAULTS
----------------------------------------------------------*/
body, html {
  font-size: 13px;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  margin: 0px;
  padding: 0px;
  color: black;
  height: 100%;
}

ul
{
  margin-left: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0px;
}

li
{
  margin-bottom: 4px;
}
a:link, a:visited
{
  color: #034af3;
}
a:hover
{
  /*color: #1d60ff;*/
  text-decoration: none;
}
a:active
{
  color: #034af3;
}
p
{
  text-indent: 20px;
  margin-top: 2px;
  margin-bottom: 3px;
  line-height: 1.1em;
}
p.a
{
  text-indent: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
p.b
{
  text-indent: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
table
{
  border-collapse: collapse;
}
textarea
{
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 13px;  
  border: 1px solid #5d95ff;
  background-color: #e4f2ff;
  padding: 2px;
}
input[type="text"],input[type="password"]
{
  font-family: Arial, Verdana, Helvetica, sans-serif; /* для FireFox */
  font-size: 13px;  
  margin-top: 2px;
  margin-bottom: 1px;
  border: 1px solid #5d95ff;
  background-color: #e4f2ff;
  padding: 4px;
}
input:focus,textarea:focus,select:focus
 {
  background-color: #fff;
 }
input[type="text" ].ReadOnly, textarea.ReadOnly
 {
  background-color: white;
  border-color: darkgray;
 }
input[type="text" ].ReadOnly:focus, textarea.ReadOnly
 {
  color: black;
 }

/* Цвет placeholder-а и его скрывание при получении фокуса */
::-webkit-input-placeholder       {color:#999999; opacity: 1; transition: opacity 0.3s ease;}
::-moz-placeholder                {color:#999999; opacity: 1; transition: opacity 0.3s ease;}
:-moz-placeholder                 {color:#999999; opacity: 1; transition: opacity 0.3s ease;}
:-ms-input-placeholder            {color:#999999; opacity: 1; transition: opacity 0.3s ease;}
:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* Чекбоксы и радиокнопки */

/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
input[type="checkbox"]
  {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
input[type="checkbox"] + label {
  cursor: pointer;
}
/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */
/* Прячем оригинальный чекбокс. */
input[type="checkbox"]:not(checked) {
  position: absolute;
  opacity: 0;
}
input[type="checkbox"]:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 50px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
input[type="checkbox"]:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #5d95ff;
  background: #e4f2ff;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
input[type="checkbox"]:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
input[type="checkbox"]:checked + label:before {
  background: #5ba3e0;
  box-shadow: none;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
input[type="checkbox"]:checked + label:after {
  left: 22px;
}
/* Показываем получение фокуса. */
input[type="checkbox"]:focus + label:before {
  box-shadow: 0 0 0 3px #e4f2ff; 
}

/* То же самое для радиокнопок */
input[type="radio"] {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
input[type="radio"] + label {
  cursor: pointer;
  margin: 10px 0;
}
input[type="radio"]:not(checked) {
  position: absolute;
  opacity: 0;
}
input[type="radio"]:not(checked) + label {
  position: relative;
  padding: 0 0 0 26px;
}
input[type="radio"]:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #5d95ff;
  border-radius: 50%;
  background: #e4f2ff;
}
input[type="radio"]:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5ba3e0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  opacity: 0;
  transition: all .2s;
}
input[type="radio"]:checked + label:after {
  opacity: 1;
}
input[type="radio"]:focus + label:before {
  box-shadow: 0 0 0 3px #e4f2ff; 
}

.green > input[type="radio"]:not(checked) + label:before {
  border: 1px solid green;
  background: #eeffee;
}
.green > input[type="radio"]:not(checked) + label:after {
  background: #00C000;
}
.yellow > input[type="radio"]:not(checked) + label:before {
  border: 1px solid goldenrod;
  background: lightyellow;
}
.yellow > input[type="radio"]:not(checked) + label:after {
  border: 1px solid goldenrod;
  top: -1px;
  left: 2px;
  box-shadow: inset 0px 1px 0px rgba(0,0,0,.5);
  background: yellow;
}
.red > input[type="radio"]:not(checked) + label:before {
  border: 1px solid red;
  background: #ffeeee;
}
.red > input[type="radio"]:not(checked) + label:after {
  background: red;
}

select
{
  font-size: 13px;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  margin: 2px 0px 2px 1px;
  padding-top: 1px;
  padding-bottom: 2px;  
  padding: 2px;
  border: 1px solid #5d95ff;
  background-color: #e4f2ff;
}

.main {
  position: relative;
  width: 1366px;
  margin: 0 auto;
}

h1
{
  font-size: 22px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 0px;
}
h2
{
  font-size: 16px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
}
h3
{
  font-size: 14px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
  margin-top: 0px;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
  margin: 1em 0px;
  padding: 1em;
/*  border: 1px solid #ccc; */
  border: 1px solid #5d95ff;
}
fieldset p
{
  margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
  display: block;
}
fieldset label.inline
{
  display: inline;
}
legend
{
  font-size: 1.1em;
  font-weight: 600;
  padding: 2px 4px 0px 4px;
}
input.textEntry
{
  width: 280px;
/*  border: 1px solid #ccc; */
}
input.passwordEntry
{
  width: 280px;
/*  border: 1px solid #ccc;*/
}
div.accountInfo
{
  width: 355px;
  margin: 40px auto;
}

/* MISC  
----------------------------------------------------------*/

.loginDisplay
{
  font-size: 12px;
  font-weight: bold;  
  display: block;
  text-align: right;
  padding-right: 10px;
  color: #072B6F;
}
.loginDisplay a:link
{
  color: #072B6F;
}
.loginDisplay a:visited
{
  color: #072B6F;
}
.loginDisplay a:hover
{
  color: #072B6F;
}
.failureNotification
{
  font-size: 1em;
  color: Red;
}
.bold
{
  font-weight: bold;
}
.submitButton
{
  text-align: right;
  padding-right: 10px;
}

/*************************************/
a.TreeView1_0:link, a.TreeView1_0:visited 
{
  color: black !important;
}
a.nav
{
  color: black;
  text-decoration: none;
}
a.nav:hover
{
  color: #000099;
  text-decoration: underline;
}
.Data
{
  text-align: right;
  padding-top: 5px !important;
  padding-right: 1px !important;
  margin-top: 1px !important;
  height: 18px;
}
/* Хак для IE 10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.Data
  {
  padding-top: 1px !important;
  }
}

.DivInfo
{
  padding: 5px;
  border: 1px solid blue;
  border-radius: 4px;
  box-shadow: rgba(64, 64, 64, 0.6) 2px 2px 2px;
  background: #c5e4ff;
}
.DivStop
{
  padding: 5px;
  margin: 10px 0px;
  border: 1px solid firebrick;
  border-radius: 4px;
  box-shadow: rgba(64, 64, 64, 0.6) 2px 2px 2px;
  color: red;
  background: #ffeeee;
}

.Button
{
  font-family: sans-serif;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 80px;
  text-align: center;
  height: 30px;
  border: 1px solid #5ba3e0;
  border-radius: 8px;
  box-shadow: rgba(64, 64, 64, 0.6) 2px 2px 2px;
  background: #c5e4ff;
  background: linear-gradient(#c5e4ff, #5ba3e0);
}
.Button:focus
  {
  outline: none;
  }
.Button:active
  {
  padding-top: 3px;
  padding-left: 7px;
  box-shadow: none;
  }
.SearchButton
  {
  width: 26px;
  height: 24px;  
  background-image: url("../../Images/magnifier.png");
  background-position: 5px 3px;
  background-repeat: no-repeat;
  background-color: #c5e4ff; 
  border: 1px solid #5ba3e0;
  border-radius: 4px;
  box-shadow: rgba(64, 64, 64, 0.6) 1px 1px 1px;
  }
.SearchButton:focus
  {
  background-color: #c5e4ff; 
  outline: none;
  }
.SearchButton:active
  {
  background-position: 6px 4px;
  box-shadow: none;
  }


/* Хак для IE 10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.Button:active
  {
  padding-top: 1px;
  padding-left: 5px;
  }
}


.IndexButton
{
  height: 22px;
  width: 22px;
  padding-left: 2px;
  padding-right: 2px;
}
.Section
{
  height: 24px;
  padding: 10px;
  margin-top: 15px;  
  margin-bottom: 10px;  
  border: 1px solid #c5e4ff;
  border-radius: 20px 0px;
  background-color: #5ba3e0;
  background: linear-gradient(#c5e4ff, #5ba3e0);
}
.Validator
  {
    color: Red;
  }
.wrapper
 {
  padding: 1px 5px;
  border: 1px solid #5d95ff;
  background-color: #c5e4ff;  
  border-radius: 10px;
  display: inline-block;
 }
.wrapper100
 {
  padding: 2px 5px;
  border: 1px solid #5d95ff;
  border-radius: 10px 0px 0px 10px;
 }
.wrapper input, .wrapper input:focus, .wrapper textarea, .wrapper textarea:focus,
.wrapper100 input, .wrapper100 input:focus, .wrapper100 textarea, .wrapper100 textarea:focus
  {
  border: none;
  outline: none;
  background-color: transparent;  
  }
.wrapper-select
 {
  padding: 1px 5px;
  border: 1px solid #5d95ff;
  border-radius: 10px;
  background-color: #c5e4ff;  
  display: inline-block;
 }
.wrapper-select select
  {
  border: none;
  background-color: transparent;  
  }


/* GRID */

.TableData
  {
  border: 1px solid #CCCCCC;
  }
.TableData td
{
  border: 1px solid #CCCCCC;
  padding: 2px 2px;
  border-spacing: 0px;
  vertical-align: top;
}
td.LeftMiddle
{
  text-align: left;
  vertical-align: middle !important;
}
td.CenterMiddle
{
  text-align: center;
  vertical-align: middle !important;
}
td.RightMiddle
{
  text-align: right;
  vertical-align: middle !important;
}

.LeftHeaderStyle
  {
  color: black;
  background-color: #96c8f0;
  /*background: linear-gradient(to right bottom, #c5e4ff, #5ba3e0);*/
  background: radial-gradient(ellipse farthest-corner at top left, #c5e4ff, #5ba3e0);
  vertical-align: top;
  padding-left: 5px !important;
  }

.SimpleHeaderStyle
  {
  color: black;
  background-color: #96c8f0;
  }

.SimpleHeaderStyle td
  {
    border: 1px solid white;
    text-align: center;
    vertical-align: middle; 
  }

.HeaderStyle
  {
  color: black;
  background-color: #96c8f0;
  background: linear-gradient(#c5e4ff, #5ba3e0);
  }
.HeaderStyle td
  {
    text-align: center;
    vertical-align: middle; 
  }
.HeaderStyle a
  {
    text-decoration: none;
    font-weight: normal;
  }
.HeaderStyle a:hover
  {
    text-decoration: underline;
  }
.SortedHeaderStyle a
  {
  text-decoration: underline;
  }

.RowStyle
  {
    background-color: White;
    /*text-align: right;*/
    vertical-align: top;
  }
.AltRowStyle
  {
    background-color: #EFF3FB;
    /*text-align: right;*/
  }
.RowStyle a, .AltRowStyle a
  {
    color: inherit;
    text-decoration: none;
  }
.RowStyle a:hover, .AltRowStyle a:hover
  {
    color: #000099;
    text-decoration: underline;
  }


.SubTotalStyle
  {
    background-color: #c5e4ff;
  }
td.SubTotalStyle
  {
    border: 1px solid #E0DFE3;
    font-weight: bold;
    padding-left: 19px;
  }
.FooterStyle
  {
    border: none;
    color: Black;
    background-color: #96c8f0;
    font-weight: normal;
  } 
.FooterStyle td
  {
    border: 1px solid White;
    vertical-align: middle;
  }
.PagerStyle
  {
    border: none;
    color: Black;
    background-color: #CCDCCC;
  } 
.PagerStyle td
  {
    border: none;
    padding-right: 5px;
  }
.PagerStyle span
  {
    font-weight: bold;    
    text-decoration: underline;
  }
.PagerStyle a
  {
    text-decoration: none;
  }
.PagerStyle a:hover
  {
    font-weight: bold;    
    text-decoration: underline;
  }

.CloseModalButton
{
  border: none;
  padding: 8px 16px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}
.CloseModalButton:hover
{
  color: white !important;
  background-color: #f44336 !important;
}
.CloseModalButton:active
{
  padding: 8px 16px;
  color: white !important;
  background-color: #c73d33 !important;
  background-position: 0;
}

.CloseModalButton:focus
{
  outline: none;
}