/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Alternates Regular'), local('MontserratAlternates-Regular'), url(https://fonts.gstatic.com/s/montserratalternates/v10/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055qfQOJ0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Alternates Regular'), local('MontserratAlternates-Regular'), url(https://fonts.gstatic.com/s/montserratalternates/v10/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0576fQOJ0.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Alternates Regular'), local('MontserratAlternates-Regular'), url(https://fonts.gstatic.com/s/montserratalternates/v10/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU055afQOJ0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat Alternates';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Alternates Regular'), local('MontserratAlternates-Regular'), url(https://fonts.gstatic.com/s/montserratalternates/v10/mFTvWacfw6zH4dthXcyms1lPpC8I_b0juU0566fQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




html
{
    height: 100%;
    background-color: silver;
}


body
{
    font-size: 0.9em;
    font-family: 'Montserrat Alternates', sans-serif;
}


.Page
{
 padding: 1em;
 flex-grow:1;
 flex-shrink:1;
}



.Top
{
    padding:1em;
    background-color:black;
    color:white;
    display:flex;
}



.Top .Space
{
    flex-grow:2;
    flex-shrink:2;
}

.Top a
{
    padding:0 1em 0 1em;
    color:orange;
}



.Bottom
{
    font-size:0.8em;
    padding:1em;
}



.Bottom a
{
    padding:0 1em 0 1em;
}



.CustomInput
{
    display:inline-block;
    position:relative;
    width:100%;
    overflow:hidden;
    vertical-align:middle;
    padding:0.3em 0.5em 0.3em 0.5em;
    border-radius: 0.2em;
    background-color:silver;
    color: black;
    box-sizing:border-box;
    border:1px solid gray;
}


input, textarea, select, button
{
    vertical-align:middle;
    padding:0.3em 0.5em 0.3em 0.5em;
    border-radius: 0.2em;
    border:0;
    background-color: silver;
    color: black;
    outline:none;
    box-sizing:border-box;
    border:1px solid gray;
}



.CustomInput input, .CustomInput textarea, .CustomInput select, .CustomInput button
{
    border-radius: 0;
    background-color: rgba(0,0,0,0);
    margin:0;
    padding:0;
    border:none;
}



.CustomInput .Gliph
{
    display:inline-block;
    width:1em;
}




.MenuPopup
{
    background-color:#FFFFFF;
    color: black;
    box-shadow:0em 0em 1em rgba(0,0,0,0.3);
}






code
{
    background-color: #FFFFC0;
}



.Warning
{
    padding: 0.5em 3.5em 0.5em 3.5em;
    background-image:url(?&image=Warning.png&scalex=64&scaley=64);
    background-size: 2.5em 2.5em;
    background-position: 0.5em 0.5em;
    background-repeat: no-repeat;
    min-height:2.5em;
}



.Inf
{
    padding: 0.5em 3.5em 0.5em 3.5em;
    background-color: #C0C0FF;
    background-image:url(?&image=Image/Info.png&scalex=64&scaley=64);
    background-size: 2.5em 2.5em;
    background-position: 0.5em 0.5em;
    background-repeat: no-repeat;
}



.Message
{
 padding-bottom:0.5em;
}



.Message .Body
{
 white-space:pre-line;
}



.CaptionTop
{
    font-size:0.5em;
}



.Unselected
{
    text-decoration: none;
    cursor:pointer;
    border-radius: 0.3em;
}



.Unselected:hover
{
    background-color:orange;
}



.UserBody
{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:stretch;
    min-height:100%;
}

.Log
{
    z-index:10000;
    overflow:auto;
    position:fixed;
    right:1em;
    top:1em;
    max-width:50%;
    max-height:80%;
    font-size:0.8em;
}



.LogLine
{
    background-position:5px 5px;
    background-repeat:no-repeat;
    background-size: 32px 32px;
    padding: 5px 5px 5px 48px;
}



.LogTime
{
    font-size:0.5em;
}



.LogMessage
{
}



.LogErr
{
 background-image: url(?&image=Error.png&scalex=32&scaley=32);
}



.LogInf
{
    background-image: url(?&image=Info.png&scalex=32&scaley=32);
}



.LogWar
{
    background-image: url(?&image=Warning.png&scalex=32&scaley=32);
}



.LogDeb
{
    background-image: url(?&image=Debug.png&scalex=32&scaley=32);
}




.PostIndicator
{
    font-size:12px;
    text-align:center;
    padding:32px;
    z-index:9999;
    position:fixed;
    top:50%;
    left:50%;
    width:1em;
    height:1em;
    background-image:url('?image=Loader.png');
    background-position:center center;
    background-repeat:no-repeat;
    margin-left:-32px;
    margin-top:-32px;

    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.ImageOk {background-image: url(?&image=Ok.png&scalex=32&scaley=32)}
.ImageTask {background-image: url(?&image=Task.png&scalex=32&scaley=32)}
.ImagePhone {background-image: url(?&image=Phone.png&scalex=32&scaley=32)}
.ImageMail {background-image: url(?&image=Mail.png&scalex=32&scaley=32)}
.ImageCancel {background-image: url(?&image=Cancel.png&scalex=32&scaley=32)}
.ImageLoad {background-image: url(?&image=Load.png&scalex=32&scaley=32)}
.ImageMan {background-image: url(?&image=Man.png&scalex=32&scaley=32)}
.ImageCD {background-image: url(?&image=CD.png&scalex=32&scaley=32)}
.ImageSandclock {background-image: url(?&image=Sandclock.png&scalex=32&scaley=32)}
.ImageError {background-image: url(?&image=Error.png&scalex=32&scaley=32)}
.ImagePlus {background-image: url(?&image=Plus.png&scalex=32&scaley=32)}
.ImageMinus {background-image: url(?&image=Minus.png&scalex=32&scaley=32)}
.ImageTrash {background-image: url(?&image=Trash.png&scalex=32&scaley=32)}
.ImageLink {background-image: url(?&image=Link.png&scalex=32&scaley=32)}
.ImageDescript {background-image: url(?&image=Descript.png&scalex=32&scaley=32)}
.ImageCatPaw {background-image: url(?&image=CatPaw.png&scalex=32&scaley=32)}
.ImagePen {background-image: url(?&image=Pen.png&scalex=32&scaley=32)}
.ImageCopy {background-image: url(?&image=Copy.png&scalex=32&scaley=32)}
.ImageLink {background-image: url(?&image=Link.png&scalex=32&scaley=32)}
.ImageMove {background-image: url(?&image=Move.png&scalex=32&scaley=32)}
.ImagePanicle {background-image: url(?&image=Panicle.png&scalex=32&scaley=32)}
.ImageBook {background-image: url(?&image=Book.png&scalex=32&scaley=32)}
.ImageZoom {background-image: url(?&image=Zoom.png&scalex=32&scaley=32)}
.ImageTriplePoint {background-image: url(?&image=TriplePoint.png&scalex=32&scaley=32)}
.ImageArrowLeft {background-image: url(?&image=Left_arrow.png&scalex=32&scaley=32)}
.ImageArrowRight {background-image: url(?&image=Right_arrow.png&scalex=32&scaley=32)}

.SmallDescript {background-image: url(?&image=Descript.png&scalex=16&scaley=16)}




*
{
    font-size:inherit;
    margin:0;
    padding:0;
}



p
{
    padding-bottom:0.5em;
    text-align:justify;
}



ul
{
    padding:0 0 0.5em 1em;
}



ol
{
    padding:0 0 0.5em.swamp 1em;
}



code
{
    display: block;
    white-space: pre-wrap;
    border-left: 2px black solid;
}



h1,h2,h3,h4,h5,h6
{
 padding-bottom: 0.1em;
 padding-top: 0.5em;
 color: #7c7c7c;
 font-weight: 300;
 line-height: 1.1;
}



h1 {font-size:1.6em;}
h2 {font-size:1.3em;}
h3 {font-size:1.2em;}
h4 {font-size:1.1em;}
h5 {font-size:1.0em;}
h6 {font-size:0.9em;}



var
{
    font-weight:bolder;
}



html
{
    font-size: 1.2em;
    font-family: Ubuntu, Arial, 'libra sans', sans-serif;
    background-color: white;
}



.Form
{
    position:absolute;
    bottom:4em;
    top:1em;
    left:1em;
    right:1em;
}



.FormToolbar
{
 position:absolute;
 bottom:0;
 left:0em;
 right:0em;
 height:3em;
 text-align:right;
}



.Gliph
{
    background-size:1em;
    background-repeat:no-repeat;
    background-position:0em center;
    vertical-align:middle;
    min-height:1em;
    padding-left:1.5em;
}



.GliphInput
{
    padding-left:2em;
    background-size:1em;
    background-repeat:no-repeat;
    background-position:0.5em center;
}



.Gliph:empty
{
    width:1em;
    display:inline-block;
}


/******************************************************************************
 * Оформление элементов формы
 */

.Group .Line
{
    margin-top:0.2em;
    margin-bottom:0.2em;
    display:flex;
    align-items:center;
}



.Group .Line .Caption
{
    flex-grow:0;
    flex-shrink:0;
    padding-right:0.5em;
    text-align:right;
    opacity:0.5;
    white-space:nowrap;
    font-size: 0.7em;
}



.Group .Line .Caption:after
{
    content: ":";
}



.Group .Line .Data
{
    flex-grow:1;
    flex-shrink:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.Group .Line .Data input[type=checkbox]
{   
    flex-shrink:0;
    flex-grow:0;
    width:1em;
}



.Group .Line .Data input, .Group .Line .Data .CustomInput
{
    flex-grow:2;
    flex-shrink:2;
    width:auto;
}



.Group .Line .Data .Caption
{
    margin-left:1px;
    margin-right:1px;
    flex-grow:1;
    flex-shrink:1;
    opacity:0.5;
    width:auto;
}



@media (max-width:1024px)
{
    .Group .Line
    {
        flex-direction:column;
        margin-bottom:1em;
    }

    .Group .Line .Caption
    {
        text-align:left;
        width:100%;
    }

    .Group .Line .Caption:after
    {
        content:none;
    }
}



/******************************************************************************
 * Всякая всячина
 */

.UserSelectNone
{
    -webkit-user-select: none;  /* Chrome all  Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */   
}



/*Текст введенный с ошиибкой*/
.TextError
{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: dashed;
}



/*Текст введенный правильно*/
.TextCorrect
{
  text-decoration: underline;
  text-decoration-color: green;
  text-decoration-style: solid;
}