/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.

Good CSS guide is located at

http://www.htmlhelp.com/reference/css/

*/
@import "DefaultStyle.css"; 

/*#region Fonts*/
@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,700&display=swap');
/*#endregion */

img
{
    border: 0;
}

/* put your changes below this comment */
input
{
    color: #666666;
}

input[type="submit"]
{
    color: Black;
}

.DetailsCell
{
	white-space: normal;
	vertical-align: top;
	font-size: 11px;
}

.DetailsAlternatingCell, .DetailsAlternatingCell a
{
	background-color: #FFFFFF;
	font-size: 11px;
}

.DescriptionRow
{
	padding-bottom: 20px ! important;
}

p.gray
{
	margin-bottom: 0px;
}

h1 
{	
	color:#000000; 
	font-family: Arial, Verdana; 
	font-size: 16pt; 
	font-weight:normal;
	margin: 2px 20px 2px 20px;
}

h2 
{
	color:#00A4E4; 
	font-family: Arial, Verdana; 
	FONT-SIZE:14pt;
}

.button
{
    margin-left: 10px;
    float: none;
    background-color:inherit;
}

a 
{
	color: #00A4E4; 
	FONT-SIZE:12px; 
	FONT-FAMILY: Arial, Sans-Serif;
}

.DetailsHeader a, .DetailsCell a, .DetailsAlternatingCell a
{
	font-size: 11px;
}

a:hover 
{
	color: #666666; 
	text-decoration: none;
}

a.pagetrail
{
	color: #666666;
	background: inherit;
}

a.pagetrail:hover 
{
	color: #000000;
	background: inherit;
}

a.mainContentItem
{
    color: #00A4E4
}

.left_nav
{
	width:200px;
	float:left;	
	margin-right: 50px;
}

.left_nav ul
{
    list-style: none;
}

.left_nav ul li
{
	font-size:12px;
	padding:3px 0px;
}

.left_nav ul li a
{
	padding-left:14px;
	background:url(../images/bg_li.png) left 4px no-repeat;
	color: #666666;
	text-decoration:none;
}

.left_nav ul li a:hover
{
	color: #00A4E4;
}

.left_nav ul li a.selected
{
	background:url(../images/bg_li.png) left 4px no-repeat;
	color:#00a4e4;
}

.left_nav ul ul
{
	padding:5px 0px 2px 15px;
}

.left_nav ul ul li
{
	font-size:11px;
}

.DataGridContainer
{
    padding: 10px 0px 20px 0px;
}

.DataGridContainer th
{
    font-size: 11px; 
    font-weight: bold;
    text-align: left;
    background-color: silver; 
    color: white;
    padding: 3px 5px 3px 5px;
}

.DataGridContainer td
{
    padding: 3px 5px 3px 5px;
    border-bottom: solid 1px #cccccc;
    vertical-align: top;
}

div.refresh {
    float:right;
    margin-top: -35px;
    padding: 4px 4px 4px 4px;
	background: silver;
	color: #FFF;
}

div.refresh a {
    color:#FFF;
    text-decoration: none;
}

div.appTitle 
{
    font-size: 12px;
}

#login-content > #LoginNameTextLabel,
#login-content > #CompanyCodeTextLabel {
	font-size: 18px;
	font-weight: bold;
}

#login-content > #LoginNameCaptionLabel,
#login-content > #CompanyCodeCaptionLabel {
	margin-bottom: 8px;
}

/* New login page design Feb 2020 */
html.login body,
html.login p,
html.login span,
html.login a,
html.login td,
html.login th {
	font-size: 14px;
}

html.login p,
html.login span,
html.login a,
html.login h1,
html.login h2,
html.login h3,
html.login h4,
html.login h5,
html.login h6,
html.login button,
html.login input,
html.login td,
html.login th { font-family: DM Sans, sans-serif; }
html.login body { color: #fff; background-color: #371EE1; text-align: center; }
@media only screen and (min-width: 992px) {
    html.login body,
    html.login p,
    html.login span,
    html.login a,
    html.login th,
    html.login td { font-size: 16px; }
}
html.login,
html.login *,
html.login ::after,
html.login ::before { box-sizing: border-box; }
#login { max-width: 470px; width: 100%; }
#login a:hover { color: #5640e6; }
#login-company-logo-container { margin-bottom: 30px; }
#login-company-logo { width: 559px; padding: 25px; max-width: 100%; }
#login-content { background-color: #fff; color: #0f2a46; }
#login h1,
#login h1 span { font-size: 28px; font-weight: bold; color: #371EE1; margin-bottom: 30px; text-align: center; }
#login-container { display: table; height: 100%; width: 100%; }
#login-content { padding: 25px; text-align: left; }

@media only screen and (min-width: 992px) {
    #login { margin: 100px auto 0 auto; }
    #login-content { padding: 40px; }
    #login-company-logo-container { margin-bottom: 60px; }
    #login h1,
    #login h1 span { font-size: 28px; margin-bottom: 40px; }
    #login.set-master-password {
      max-width: 750px;
    }
    #login.login-redirection {
      max-width: 900px;
    }
	#login.set-master-password .login-row input,
	#login.set-master-password .password-requirements,
	#login.login-redirection .login-row input,
	#login-content a.link-button.master-password-back-button {
		display: block;
		max-width: 390px;
		margin: 0 auto;
	}
}

#login-content input[type=text],
#login-content input[type=password] { width: 100%; height: 40px; border: 1px solid #0f2a46; line-height: 40px; font-size: 14px; padding: 0 15px; color: #0f2a46; }
#login-content input[type=text]::placeholder,
#login-content input[type=password]::placeholder {
    color: #cfd4da;
}

#login-content #CompanyCodeDiv input[type=text]::placeholder {
    font-size: 13px;
}

@media only screen and (min-width: 992px) {
    #login-content input[type=text],
    #login-content input[type=password] { height: 50px; line-height: 50px; font-size: 18px; padding: 0 20px; }
}

#login-content > input[type=text],
#login-content > input[type=password],
#login-content > .RememberMeBox,
#login-content > span,
#login-content > #CompanyCodeDiv > input[type=text],
#login-content .login-row { margin-bottom: 16px; display: block; }
#login-content .login-options input[type=password],
#login-content .login-options input[type=submit] {
	margin: 15px auto;
}
#login-content #login-options-row { margin: 40px 0; display: flex; justify-content: space-between; }
#login-content #login-options-row,
#login-content #login-options-row span,
#login-content #login-options-row a { font-size: 14px; }
@media only screen and (min-width: 992px) {
    #login-content #login-options-row,
    #login-content #login-options-row span,
    #login-content #login-options-row a { font-size: 16px; }
}
#login-content input[type=submit],
#login-content a.link-button { font-size: 20px; width: 100%; background-color: #371EE1; color: #fff; font-weight: bold; display: block; padding: 10px 20px; border: none; margin: 12px 0; cursor: pointer; text-decoration: none; text-align: center; }
@media only screen and (min-width: 992px) {
    #login-content input[type=submit],
    #login-content a.link-button { font-size: 22px; padding: 15px 35px; margin: 15px 0; }
}
#login #RetrieveButton { margin-top: 30px; }
@media only screen and (min-width: 992px) {
    #login #RetrieveButton { margin-top: 80px; }
}
#login-content a.back-button { background-color: #4B5161; }
#login-content a.back-button:hover { background-color: #B4AE9E; }
#login-content input[type=submit]:hover:enabled,
#login-content a.link-button:hover:enabled { background-color: #5640e6; }
#login-content input[type=submit]:disabled,
#login-content a.link-button:disabled { background-color: #adcaf7; }
#login-content .ErrorMessage { padding: 0; margin: 20px 0; display: block; color: #eb4034; }
#login-content .ErrorMessage:empty { display: none !important; }
#login-content .SuccessMessage { text-align: center; padding: 0; margin: 20px 0; display: block; color: #371EE1; font-weight: bold; }
#login-content input + img[id$=NotificationID] { position: relative; display: block; }
#login-content input + img[id$=NotificationID][alt]:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: attr(alt); background-color: #fff; }
#login-content a { color: #371EE1; text-decoration: underline; }
#login-page #login-content a {
	text-decoration: none;
	font-size: 13px;
}
#login-page #login-content label {
	font-size: 15px;
	font-weight: normal;
	font-family: DM Sans, sans-serif;
}
#login-page #login-content label.LoginLabel {
	line-height: 1.7;
}
#login-page #login-content span.ForgetUser,
#login-page #login-content span.ForgotPassword {
	float: right;
	margin-bottom: 0;
	font-weight: bold;
}
#login-footer { font-size: 10px; margin-top: 20px; font-family: DM Sans, sans-serif !important; }
#login-footer * { font-size: 10px; font-family: DM Sans !important; }
#login-footer a { color: #fff; text-decoration: none; }
#login-footer a:hover { color: #73d7f4; }
#login-footer > * { padding: 0 10px; line-height: 1em; white-space: nowrap; }
#login-footer > *:not(:first-child) { border-left: 1px solid #fff; }
@media only screen and (min-width: 992px) {
    #login-footer,
    #login-footer * { font-size: 12px; }
    #login-footer > * { padding: 0 10px; }
}

#login-content input[type=checkbox] + label {
  position: relative;
  min-height: 34px;
  padding-left: 40px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
#login-content input[type=checkbox] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  transition: transform 0.28s ease;
  border-radius: 0;
  border: 2px solid #0f2a46;
}
#login-content input[type=checkbox] + label:after {
  content: '';
  display: block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #371EE1;
  border-left: 2px solid #371EE1;
  transform: rotate(-45deg) scale(0);
  transition: transform ease 0.25s;
  position: absolute;
  top: 8px;
  left: 6px;
}
#login-content input[type=checkbox] {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
  margin-left: -20px;
}
#login-content input[type=checkbox]:checked ~ label:before {
  border: 2px solid #371EE1;
}
#login-content input[type=checkbox]:checked ~ label:after {
  transform: rotate(-45deg) scale(1);
}
#login-content input[type=checkbox]:focus + label::before {
  outline:0.3px solid #000000;
}
#login-content > *:last-child {
  margin-bottom: 0;
}
.login-confirmation-modal {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
#login-confirmation-content {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 600px;
    margin-top: -300px;
    margin-left: -250px;
    background-color: white;
    padding: 25px;
}

#LoginStatusString {
  display: none;
}
@media only screen and (max-width: 991.98px) {
  .table-wrapper {
    overflow: auto;
  }
}
#contact-lists table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	margin: 15px 0;
}
#login-contact-lists table tbody tr {
	cursor: pointer;
}
#contact-lists table tbody tr td p {
    margin: 0 0 0.4em 0
}
#contact-lists table .SwitchCompanyHeader td,
#contact-lists table th {
	background-color: #ededed;
	text-align: left;
}
#contact-lists table tr:nth-child(2n) td {
  background-color: #f5f5f5;
}
#contact-lists table th,
#contact-lists table td {
  padding: 8px 10px;
}
#contact-lists table tr.selected td {
  background-color: #e6ffe6;
}
#contact-lists table tr.selected td:first-child {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' height='20'><path fill='%23009900' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'></path></svg>");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#contact-lists table tr td:first-child input[type=radio] {
  visibility: hidden;
}

#login-page #login-content #ShowCompanyCodeLabelDiv label {
	color: #371EE1;
	font-weight: bold;
	font-size: 13px;
    cursor: pointer;
}

#login-page #login-content #ShowCompanyCodeLabelDiv label:hover {
	color: #5640e6;
}