/**
 CLASSES
*/
.ui-widget-header
{
   background: none;
   background-color: #5EB7FF;
}

.acenter
{
   text-align: center;
}

.main-text
{
   margin: 0 0 30px;
   font-size: 16px;
}

.action
{
   background: none;
   background-color: #63B1E5;
   width: 300px;
   height: 50px;
   text-transform: uppercase;
   font-size: 16px;
}

.first-text
{
   margin-top: 30px;
}

.red {
   color: red;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active
{
   background-color: #003D8F;
}

.loader
{
   text-align: center;
   height: 45px;
   background: transparent url("../img/loader.gif") no-repeat center center;
}

/**
 LAYOUT
*/
#main-container
{
   margin-top: 40px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

#main-container.login
{
   background-color: #DDDDDD;
}

/**
 HEADER
*/
#main-title
{
   margin: 0;
   padding: 10px 20px;
   height: 75px;
   background-color: #00A1DE;
   font-size: 26px;
   color: #FFCD00;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   white-space: no-wrap;
   text-align: center;
   position: relative;
}

#main-title img
{
   position: absolute;
   left: 15px;
   top: 10px;
   font-size: 12px;
   margin-right: 30px;
   vertical-align: top;
}

#sub-title
{
   margin-top: 5px;
   text-align: center;
}

/**
 FOOTER
*/
#footer
{
   margin: 0 15%;
   border-top: 1px solid black;
}

/**
 LOGIN
*/
#login-form 
{
   margin: 0 auto 30px;
   width: 300px;
   position: relative;
}

#log
{
   margin: 0 auto 30px;
   width: 300px;
   position: relative;
}

#docs-info
{
   display: none;
}

#docs-info li
{
   margin: 15px;
}

#login-form input
{
   width: 285px;
   height: 30px;
   text-align: center;
}

#help
{
   position: absolute;
   top: 4px;
   right: 4px;
}

/**
 DOCUMENTS
*/
button#disconnect-btn
{
   margin-right: 12px;
   float: right;
   height: 30px;
   width: 200px;
}

#buttons button
{
   margin: 0 0 15px;
   position: relative;
   overflow: visible;
}

#buttons .number
{
   position: absolute;
   left: -30px;
   top: 0;
}

#buttons .icon
{
   position: absolute;
   right: -14px;
   bottom: -12px;
}

button#download-btn
{
   margin-left: 25px;
}

button#letter-btn
{
   margin-right: 12px;
   float: right;
}

button#letter-btn.disabled
{
   outline: none;
   background-color: gray;
   border-color: gray;
}

#docs-table th
{
   text-align:center;
   font-size:16px;
   font-weight: bold;
   color: #FFFFFF;
   background-color: #5EB7FF;
}

#docs-table td
{
   width: 45%;
}

#docs-table td a
{
   color: black;
}

#docs-table td.icon
{
   width: 5%;
}

#docs-table span.info
{
   display: none;
}

#docs-table .tooltip
{
   opacity: 1;
   filter: alpha(opacity=100);
}

#docs-table .tooltip-inner
{
   border: 1px solid black;
   background-color: white;
   color: black;
   font-size: 14px;
   font-style: italic;
}

/**
 SIGNATURE
*/
#viewer-container
{
   text-align: center;
   height: 700px;
   overflow-y: auto;
   background-color: #CCCCCC;
}

#message
{
   text-align: center;
   padding: 3px;
   color: red;
   font-weight: bold;
   display: none;
}

#sign-button
{
   outline: none;
}

#sms_code_form
{
   text-align: center;
}

@media screen and (max-width: 800px)
{

   #main-title
   {
      text-align: left;
   }
   
   #main-title img
   {
      margin-right: 10px;
      position: static;
      float: left;
   }
   
   .action,
   #login-form
   {
      width: 250px;
   }

   #login-form input
   {
      width: 240px;
   }

   #main-content
   {
      padding: 3px;
   }

   #main-title
   {
      font-size: 20px;
   }

   #buttons
   {
      text-align: center;
   }

   button#download-btn
   {
      margin: 0 0 15px;
   }

   button#letter-btn
   {
      margin: 0 0 15px;
      float: none;
   }

   #docs-table td.icon
   {
      display: none;
   }

}