@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:wght@300;700&display=swap');

/* Reset
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
ol, ul { list-style: none }
blockquote, q { quotes: none }
:focus { outline: 0 }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto;  }
mark { background: none; }
select { max-width: 100%; }



html {
height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
}

body{

    color: #666;
    qwidth: 100%;
    overflow: scroll;
   
    line-height: auto;
    
    
    background-repeat:no-repeat;

    min-height: 100%;
 

         background: #E0EEEE url(https://crm.informatika.in.ua/images/bg.jpg) center center repeat;
}
body,
input,  textarea,a,
a:visited {

     font-size: 16px;
    line-height: 22px;
     color: #333;
 }
 

 
a,
a:visited {

  
	text-decoration: none;
}

a.action,
a.action:visited
{
 color:  rgb(41,92,194);
}

a:hover, .waiting a:hover {
	text-decoration: underline;
	color:  rgb(51,102,204);
}

 
p{
margin: 8px 0;
} 
 
 

label {
     font-size: 12px;
     padding-top: 25px;
            line-height: 22px;
     display: blcok; 
     }

.help-page label {
    font-size: 14px;

}
     
fieldset {

    padding: 16px;
       border: none;

}




.top {
background-color: rgb(100,100,100);
background-color: #DDDDDD;
padding: 24px 0;
text-align: center; 
  border-radius: 16px 16px 0 0;

}
.block {
        display: block;
     width: 250px;
     margin: 0 auto;
     margin-top: 50px;
         box-shadow: 0px 0px 13px 0px rgba(180,180,180,0.7);
 border: 1px solid #ccc;
	/*width: 100px;*/
	background-color: #fff;
   border-radius: 16px;
	padding: 0;
}


.container {

    box-shadow: 0px 0px 15px 0px rgba(180,180,180,1);

    border: 1px solid #FFF;

    display: block;
    max-width: 680px;


    margin: 0 auto;
    margin-top: 50px;

    text-align: left;
    animation: fadeIn 2s ease-out;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.container,
.header,
.content{
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

.header,
.content
{



    padding: 32px 48px;

}

.header {
    text-align: center;
    background-color: #ececec;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;



}



.content {
    background-color: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    text-align: left;
}

.justify {
    text-align: justify;
}

h1 {
     font-size: 24px;
    line-height: 32px;
     text-align: center;
    margin-bottom: 16px;

    font-weight: bold;
     text-align:  center;
     color: #666;
     }
     
h2 {
     font-size: 18px;
     text-align: center;
     margin: 8px auto;
    font-weight: bold;
     text-align:  center;
     color: #666;
     }
     
.msg{
padding: 8px 16px;
margin: 8px 0;
border: 2px solid   rgb(0,176,48); 
background-color: rgb(192,255,176);

color: rgb(0,64,0);
   border-radius: 8px;
   }
   
   
   
.msg.err
{
border: 2px solid  rgb(176,0,0); 
background-color: rgb(255,240,240);
color:  rgb(176,0,0);
}

input[type=text], 
input[type=password], 
input[type=tel],
input[type=submit],
textarea 
{


         -webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
            width: calc(100% - 32px);
     border: 1px solid #aaa;
     box-shadow: 0px 0px 4px #eee; max-width: 100%;
        border-radius: 6px;

        padding: 8px 16px;
        color: #070707;
     -webkit-appearance: none;
-moz-appearance: none;
appearance: none; 


}
input:focus, 
textarea:focus
{
 border: 2px solid #f44814;
 padding: 7px 15px;
      /*box-shadow: 0px 0px 5px #f8981c;*/ 
}

input[type=submit]
{
cursor: pointer;
     background-color: #f8981c;
     border-color: #f44814;
     width:    100%;
     border: none;
     padding: 16px 0;
     color: #fff;
     font-weight: bold;
        transition-property: border-color, background-color;
transition-duration: 0s, 0.2s;
transition-timing-function: ease, ease-out;
transition-delay: 0s, 0s;
}
input[type=submit]:hover
{
    background-color: #ffaf47;
    padding: 16px 0;
}
input[disabled=disabled],
textarea[disabled=disabled],
input[type=submit][disabled=disabled]:hover
{
background-color: rgb(223,223,223);
color: rgb(112,112,112);
 
}

img {max-width: 100%;}

img.logo {
    width: 50%;
}

.col-r {
    width: calc(70% - 24px);
    padding-left: 24px;
    float: left;
}
.col-l {
    width: calc(30% - 24px);
    padding-right: 24px;
    float: left;
}


@media screen and (max-width: 980px) {
 
.container {
    width: calc100%;
    border: none;
    max-width: none;
    margin-top: 0px;
    box-shadow:none;

}

    .col-l {
        width: 100%;
        float: none;
        padding: 0;
    }
    .col-r {
        width: 100%;
        float: none;
        padding: 0;
    }

    .content,
    .header
    {
        padding: 16px;
        border-radius: 0;
        border-radius: 0;
    }

    .header{
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .contact-selector-container
    {
        max-width: 60%;
        margin: 0 auto;
    }

body {
    background: none;

}
body,
input,  textarea,a,
a:visited  
{
         font-size: medium;
}
label {
    font-size: small;
    line-height: 1;
}
input,
input[type=submit],
textarea {
 
}
img {width: 75%;}

}








li{
    margin: 2px 0;
    }
    
    
p.loginTitle {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
}    
    
.l-radio {
  padding: 6px;
  border-radius: 50px;
  display: inline-flex;
  cursor: pointer;
  transition: background 0.2s ease;
  margin: 8px 0;
  -webkit-tap-highlight-color: transparent;
}
.l-radio:hover, .l-radio:focus-within {
  background: rgba(159, 159, 159, 0.1);
}
.l-radio input {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: none;
  border: 0;
  box-shadow: inset 0 0 0 1px #9F9F9F;
  box-shadow: inset 0 0 0 1.5px #9F9F9F;
  appearance: none;
  padding: 0;
  margin: 0;
  transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25);
  pointer-events: none;
}
.l-radio input:focus {
  outline: none;
}
.l-radio input:checked {
  box-shadow: inset 0 0 0 6px #f44814;
}
.l-radio span {
  vertical-align: middle;
  display: inline-block;
  line-height: 20px;
  padding: 0 8px;
}