/*
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 "../BaseStyle.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: #30302E;
}

#login-content > #LoginNameTextLabel,
#login-content > #CompanyCodeTextLabel {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 16px;
	overflow-wrap: break-word;
}

/* New login page design Feb 2020 */
@media only screen and (max-height: 480px ) {
	#login-whole-page {
		min-height: 100vh;
	}
	#login-footer {
		bottom:unset !important;
		position:unset !important;
		left:unset !important;
		transform:unset !important;
		margin-top:0 !important;
	}
	#login-supply-chain-image-container {
		display:none !important;
	}
	#login-content {
		flex-direction:column !important;
		display:flex;
		padding-bottom: 0;
	}
	#login {
		margin: 0 auto !important;
	}
	#login-page {
		margin-top: 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	#LoginForm {
		flex-direction:column;
	}
	#block-separator {
		margin:10px !important;
	}
	#login-content > #LoginNameTextLabel {
		margin-bottom:0;
	}
}
html.login ul {
	list-style-type:circle;
}
html.login body { color: #fff; background-color: white !important; text-align: center; height: 100vh}
#login { max-width: 470px; width: 100%; margin: 100px auto 0 auto; }
#login-company-logo-container { margin-bottom: 30px; width:50%; margin-left:auto; margin-right:auto; }
#login-company-logo { width: 559px; max-width: 100%; padding:unset; }
#login-supply-chain-image-container { display:none; height:inherit; width:33%; background-color:#371EE1; margin: 25px; border-radius:15px; }
#login-button-panel-div { display:flex; flex-direction:row; width:100%; height:100%; gap:42px; }
#select-org-label { font-weight: bold; }
#button-container { display:flex; flex-direction:row; width:100%; height:100%; gap:42px; }
#supply-chain-image {height: 100%; width: 100%; object-fit: contain; }
#login-content {
	background-color: #fff;
	color: #30302E;
}
#block-separator { margin:20px; }
#link-sent-paragraph { text-align:center; }
#login h1,
#login h1 span { font-size: 28px; font-weight: bold; color: #30302E !important; margin-bottom: 30px; text-align: center; margin-left:0; }
#login-button-panel-div { display:flex; flex-direction:row; width:100%; height:100%; }
#LoginForm { display:flex; justify-content:center;}
#login-page-left-div { flex-grow:1; }
#login-whole-page { display: flex; flex-direction: row !important; background-color:white; min-height: 100vh !important; }

@media only screen and (min-width: 992px) {
	#login {
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 0;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
    #login-content { padding: 20px 0; }
    #login-company-logo-container { margin-bottom: 30px; margin-left:0; }
	#button-container { display:flex; flex-direction:row; width:100%; height:100%; gap:34.25px !important; }
	#login-supply-chain-image-container { display: block; height: inherit; width:33%; background-color:#371EE1; margin: 25px; border-radius:15px; }
	#supply-chain-image {height: 100%; width: 100%; object-fit: contain; }
	#link-sent-paragraph { text-align:left; }
    #login h1,
    #login h1 span { color: #30302E !important; text-align: left !important; font-size: 28px; margin-bottom: 40px; margin-left:0;}
    #login.set-master-password {
      max-width: 460px;
}
	#login #Update { margin: 0 auto; }
}

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

@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; border-radius: 5px;}
}

#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 { display: block; border-radius: 5px; margin-bottom:0;}
#login-content .login-options input[type=password],
#login-content .login-options input[type=submit] {
	margin: 15px auto;
}
#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: 5px 20px; margin: 12px 0; cursor: pointer; text-decoration: none; text-align: center; border-radius: 5px; border: 2px solid; border-color: #371EE1; }
@media only screen and (min-width: 992px) {
	#login-content a.back-button { margin: 15px 0 !important; padding: 10px 35px !important; font-size:22px !important; min-width:45.61% !important; max-width:45.61% !important; }
	#login-content a.back-button-2 { margin: 15px 0 !important; padding: 10px 35px !important; font-size:22px; width:47% !important; }
	#login-content input[type=submit],
    #login-content a.link-button { font-size: 22px; padding: 10px 35px; margin: 15px 0; }
}
#SaveEmailButton,
#login #RetrieveButton { display: flex !important; padding: 5px 20px; margin: 12px 0; border: 2px solid; border-color: #371EE1; width:45% !important;}
@media only screen and (min-width: 992px) {
	#SaveEmailButton,
	#login #RetrieveButton { display:flex !important; padding: 10px 35px; margin: 15px 0; width:47% !important; }
}
#login-content a.back-button { background-color: white; border: 2px solid #6B6B6880; margin: 12px 0; padding: 5px 20px; border-radius: 5px; max-width:45%; min-width:45%; font-size:20px; }
#login-content a.back-button-2 { background-color: white; border: 2px solid #6B6B6880; margin: 12px 0; padding: 5px 20px; border-radius: 5px; width:45%; }
#login-content a.back-button:hover { background-color: #F1F1EF; }
#login-content a.back-button-2:hover { background-color: #F1F1EF; }
#login-content input[type=submit]:hover:enabled,
#login-content a.link-button:hover:enabled { background-color: #5640e6; border-color:#5640e6; }
#login-content input[type=submit]:disabled,
#login-content a.link-button:disabled { background-color: #adcaf7; display: block; box-sizing:border-box; border-color:#adcaf7 !important; }
#login-content .ErrorMessage { padding: 0; margin: 20px 0; display: block; color: #C3373A; font-weight:normal; }
#login-content .SuccessMessage { text-align: left; padding: 0; margin: 20px 0; display: block; color: #30302E; font-weight: bold; }
#login-content a { color: #30302E !important; text-decoration: none; font-weight:normal; }
#login-page #login-content label.LoginLabel {
	line-height: 1.7;
	color: #30302E;
	font-weight:normal !important;
}
#login-page #login-content span.ForgetUser,
#login-page #login-content span.ForgotPassword {
	float: right;
	margin-bottom: 0;
	margin-top: 16px;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-decoration-color: #30302E;
}
#login-footer { font-size: 10px; font-family: DM Sans, sans-serif !important; color: #6B6B68; bottom:0; position:fixed; margin: 15px; }
#login-footer * { font-size: 10px; font-family: DM Sans !important; color: #6B6B68 !important; }
#login-footer a { color: #fff; text-decoration: none; }
#login-footer a:hover { color: #73d7f4; }
#login-footer > * { line-height: 1em; white-space: nowrap; }
@media only screen and (min-width: 992px) {
    #login-footer { font-size: 12px; bottom:0; left:0; position: fixed; margin: 15px; left:0; transform:none; }
    #login-footer * { font-size: 12px; }
}

@media only screen and (max-width: 1100px) {
  .table-wrapper {
    overflow: auto;
  }
}
@media only screen and (min-width: 1100px) {
	#set-password-page-panel {
		margin-left: 0;
	}
}
#contact-lists table {
	max-width:460px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	margin: 15px 0;
}
.set-password-table-header {
	background-color: #ededed !important;
}
.choose-company-table {
	overflow-x: unset !important;
}
#contact-lists {
	max-width: 460px;
	overflow-x: scroll;
}

#contact-lists table tr:nth-child(2n) td,
#contact-lists table th {
	background-color: white;
}

#contact-lists table th,
#contact-lists table td {
	padding: 8px 10px;
	overflow-wrap: break-word;
}
#contact-lists table.choose-company-table tr.selected td {
	background-color: #e6ffe6;
}
#contact-lists table tr.selected td {
	background-color:white;
}
#contact-lists table tr.selected td:first-child {
	background-image: none;
}
#contact-lists table tr td:first-child input[type=radio] {
	display:none;
}
#contact-lists table tr.selected td #blue-radio-button {
	border: 5.5px #371EE1 solid;
	background-color: white;
}

#login-page #login-content #ShowCompanyCodeLabelDiv label {
	color: #30302E;
	font-weight: normal;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

#blue-radio-button {
	height:16px;
	width:16px;
	border: solid 1.5px #30302E;
	background-color: white;
	border-radius:50%;
	cursor:pointer;
}
#blue-radio-button:hover {
	background-color: #F1F1EF;
}