@font-face {font-family: 'KONE';src: url('../fonts/kone/Inter-Regular.ttf');}

/* MAIN HTML ELEMENTS */
	* { font-family: 'KONE'; color: #141414; }
	html { height: 100%; width: 100%; font-size:12pt; }
	
	body {
		background: url('../img/backgrounds/KCOLLogin_Background.jpg') no-repeat center center;
		background-size: cover;
		/*background-position-y: 35%;*/ /* Move the background image 20% down vertically */
	}
	
	body:after{ position:fixed; content:""; top:0; left:0; right:0; bottom:0; z-index:-1; }
	h1 { font-size: 30pt; }
	h2 { font-size: 16pt; }
	h3 { font-size: 12pt; }
	a, a:hover, a:visited { color: #1450F5;}
	a:focus {outline: 0;}
	label { font-weight: normal;margin-left: 35px;color: #000000; margin-top: 6px; }

	a.btn { text-decoration: none;border-radius: 27px;padding-top: 9px;margin-left: -203px;height: 40px;font-size: 18px;margin-top: 25px; width: 178px;}

	.loading-overlay {display:none;}
	.loading-content {display:none;}
	  

	.login-container { width: 450px;margin:auto; font-size:12pt;margin-top: 255px;}
	.login-container h1 { font-size: 30pt; }
	.login-container h3 { font-size: 12pt; }

	

	.form-signin-heading { text-transform: initial;margin-top: 25px;
    color: #141414;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;}
	.btn-login { text-transform: initial;margin:0 auto; height: 48px;
        padding: 8px 14px;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        background: #1450F5;
        color: #FFF;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;margin-left: 17px;display: flex;   }
	.btn-row {margin-top: 60px;}
	.float-login {margin-left:210px}
	.opacity-0 {opacity:0 !important;}
	div [class*=col] { padding-top: 12px; }

	
	header h1 { color:#141414; margin: 0px; padding: 10px; padding-top:15px; float: left;}
	header img { float: left; margin-top: 12px; }
	.SignupOutputPanel {
		background: #FFFFFF 0% 0% no-repeat padding-box;opacity: 0.8;border-radius: 10px 10px 10px 10px;width: 572px;height: 167px;margin: 10px 0px;
	}
	.singnup-paragraph{
		margin: 0 35px 10px;
        color: #000000;
	}
	#unkuser {
		margin-left: -2px;
	}
	

/* Utility */
	.inline{display:inline-block;}	
	.transform {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}
	.full-size-a{display: inline-block;width: 100%;}	
	.float-l {float:left;}
	.float-r {float:right;}
	.margin-auto {margin:auto;}
	.tip {color:#ddae07;}
	.display-block{display: block !important;}
	.display-none{display: none !important;}
	.in-line {display: inline-block;}
	.disabled-text{ color: #b8bfc8;}
	.disabled-text span, .disabled-text div{ color: #b8bfc8 !important;}
	.padding-left-0 {padding-left:0px;}
	.default-cursor{cursor:default !important;}
	
/* HTML Select Tag Styling */ 
	select {width: 100%;border: none;border-radius: 4px;padding: 5px 35px 8px 10px;background-color:rgba(0,0,0,0.3);-webkit-appearance: none;appearance: none;-moz-appearance: none;background-position: calc(100% ) , calc(100% ) , 100% 0;background-size: 35px 40px, 5px 5px, 1.7em 2.5em;background-repeat: no-repeat;background-image: url(../img/icons/dropdown-arrow.png);}
	select option{background-color:#fff;color:#338dc7;}
	select option:hover{background-color:#338dc7;color:#fff;}
	select option:active{background-color:#0071b9;color:#fff;}
	select::-ms-expand {display: none;}
	select option{color:#313131;}


/* Language */
	.lang-container {text-align: center;margin-top: 15%;}
	.lang-sel {width:200px;margin-left: 15px;}
	.lang-container select {text-transform:uppercase;}
	.lang-container select option{text-transform:uppercase;}
	.lang-sel-box {margin-top:30px;}

/* Verify */
	.verify-container {text-align:center;}
	.verify-container h1{margin-top:20px;}
	.verify-container p{margin-top:25px;width: 600px;margin: 25px auto;}
	.verify-container .user-info-box {width:600px;min-height: 400px;margin: auto;margin-top:50px;text-align:left;}
	.verify-container input{text-transform:none;width:100%;background-color: rgba(0,0,0,0.2);border: 1px #a09c9c solid;border-radius: 4px;padding: 15px 5px 13px 15px;}
	.verify-container .email-text {text-transform:none;width:100%;padding: 15px 5px 13px 15px;}
	.verify-container .label-txt{text-align:left;margin-top: 15px;}
	.verify-container .footer-pag{position: relative;margin-top: 10%; }

/* Portfolios */
	.portfolio-container  {text-align:center;}
	.portfolio-container  h1{margin-top:20px;}
	.portfolio-container  p{text-align:left;margin-top:25px;width: 600px;margin: 25px auto;}
	.portfolio-container  .user-info-box {width:600px;margin: auto;margin-top:50px;text-align:left;overflow: hidden;}
	.portfolio-container  input{text-transform:none;width:100%;background-color: rgba(0,0,0,0.2);border: 1px #a09c9c solid;border-radius: 4px;padding: 15px 5px 13px 15px;}
	.portfolio-container  .email-text {text-transform:none;width:100%;padding: 15px 5px 13px 15px;}
	.portfolio-container  .label-txt{text-align:left;margin-top: 15px;}

/* Final */
	.final-container {margin: auto;text-align:center; }
	.final-container h1{margin-top: 5%;}
	.final-container p{width:600px;margin: auto;margin-top:40px;}
	.final-container a {text-decoration:none;margin-top:25px;}

/* Thumbnail Component */
	.thumbnail-box {background-color: #0071b9; height: 90px; width: 100%;color: #ffffff;}
	.thumbnail {background:transparent;border:none;text-align:center;}
	.thumb-padding {padding:15px;}
	.thumbnail-box{padding-top: 18px;font-size: 30pt;}
	.portfolio-container a{text-decoration:none;}
	.caption .port-txt{margin:0px;}
	.thumbnail .caption{padding:0px;}

/* Custom created grid col width */
	.col-1-10{width: 20%;float: left;}

/* Pagination Component */
    .pagination-div {padding: 5px;border-radius: 4px;margin: auto;}
    .pagination-div button {background-color:transparent;border:none;}
    .pagination-div button[disabled] {color:#b8bfc8;}
    .content-margin {margin: 0px 5px;min-width: 80px;text-align: center; display: inline-block; }
    .pagination-margin-top {margin-top:12px;}

/* Manage Team */
	.team-container {text-align:center;}
	.team-container .team-box{text-transform:uppercase;}
	.team-container h1{margin-top:20px;}
	.team-container p{margin-top:25px;width: 600px;margin: 25px auto;}
	.team-container .user-info-box {width:500;margin: auto;margin-top:50px;text-align:left;}
	.team-container input{text-transform:none;width:100%;background-color: rgba(0,0,0,0.2);border: 2px solid rgba(110,108,110,0.8);border-radius: 4px;padding: 5px 10px 5px 10px;}
	.team-container .email-text {text-transform:none;width:100%;padding: 15px 5px 13px 15px;}
	.team-container .label-txt{text-align:left;margin-top: 15px;}
	.team-container select {height: 46px;width: 100%;border: 2px solid rgba(110,108,110,0.8);border-radius: 4px;padding: 5px 35px 5px 10px;background-color:rgba(0,0,0,0.3);-webkit-appearance: none;appearance: none;-moz-appearance: none;background-position: calc(100% ) , calc(100% ) , 100% 0;background-size: 40px 45px, 5px 5px, 1.7em 2.5em;background-repeat: no-repeat;background-image: url(../img/icons/dropdown-arrow.png);}
	.team-container .info-row{margin-bottom:5px;}
	.team-container div [class*=col]{padding-top:0px;}
	.team-container .button-wrapper a{text-decoration:none;}
	.team-container .button-wrapper {margin-top:50px;}
	.team-container .button-wrapper .row{padding: 5px;}    
	.team-container .label-txt {margin:0px;padding-top: 10px !important;}
	.team-container .access-right .heading{margin-top: 50px;}
	.team-container .t-banner{padding: 10px 20px 20px 20px;}
	.team-container .t-select {min-width: 220px}
    .team-container .t-select-label {min-width: 50px;}
    .team-container .m-top-100 {margin-top: 100px;}

/* Action Button Component */
	.button-normal-port-1{  padding: 6px 15px; border-radius: 4px; background-color: #0071B9; color: #FFFFFF;}
	.button-normal-port-1:hover , .button-normal-port-2:hover , .disabled-button:hover{ background-color: #338DC7; color: #FFFFFF !important;}
	.button-normal-port-2 {  padding: 6px 15px; border-radius: 4px; background-color: #9DA7B3; color: #434347 !important;}
	.disabled-button{  padding: 6px 15px; border-radius: 4px; background-color: #b8bfc8; color: #FFFFFF;}
	.button-normal{ border-radius: 4px; background-color: #B5BCC5; color: #313131;}
	.button-normal:focus { background-color: #0071B9; color: #FFFFFF;}
	.action-button-top {margin-top: 50px;}
	.button-medium{min-width:146px !important;min-height:34px !important;text-align:center;text-transform:uppercase;margin-left: 10px;text-decoration:none;}
	.button-small{min-width:96px !important;min-height:34px !important;text-align:center;text-transform:uppercase; }
	.button-wrapper{margin-bottom: 20px;padding-right: 10px;}
	#button-section {display: inline-flex;text-align: center;}
	.btn-primary:hover{background-color: #1450F5;color: #ffffff;opacity: 0.8;}
	.btn-primary:active,.btn-primary:focus{background-color: #1450F5 !important;color: #ffffff !important;}

/* Pagination Circles */
	.pagination-cont {position: absolute;left: 50%;margin-top: 20px;margin-left: -100px;}
	.pagination-cont a {color:#b5bdc5;text-decoration:none;}
	.pagination-cont div {display:inline-block;text-decoration:none;height:30px;width:30px;border-radius:50%;background-color:#d2d7de;}
	.pagination-cont .active {color:#fff !important;background-color:#0d5b96 !important;}
	.pagination-cont .active a{color:#fff !important;}
	.pagination-cont hr{border-top: 3px solid #fff;vertical-align: middle;display:inline-block;width:50px;border: 0;height: 0;border-bottom: 3px solid #fff;}
	.footer-pag{position: relative;}

/* Team Accordion */
	.team-box {margin: auto;margin-top:30px;text-align:left;}
	.team-accordion {margin: auto;margin-top:5px;text-align:left;}
	.team-accordion a{padding: 5px 0px;color: #fff;}
	.team-accordion .panel-title{font-size:inherit;margin-bottom: -4px;}
	.team-accordion .panel-group .panel+.panel{margin-top: 2px;}
	.team-accordion .panel, .team-accordion .panel-default>.panel-heading{background-color:transparent;}
	.team-accordion .panel-default, .panel-default>.panel-heading+.panel-collapse>.panel-body {border-color: rgba(110,108,110,0.8);border-width: 2px;}
	.team-accordion .panel-heading {padding:0px;}
	.team-accordion .collapse.in {padding-top:0px;}
	.team-accordion div [class*=col]{padding-top: 4px;word-wrap: break-word;}
	.team-accordion .panel-body{background-color:rgba(59,50,49,0.3);padding: 10px 15px;}
	.team-accordion h3{text-transform:uppercase;margin: 0px 0px 20px 0px;}
	.team-accordion .accordianDownIcon{color: #338dc7; font-size: 12px; text-align: right; padding-right: 10px; padding-top: 5px; float: right;}
	.team-accordion .accordianItem{background:rgba(0, 113, 185, 0.49);padding: 10px 0px;}
	.team-accordion .collapsed{background-color:rgba(59,50,49,0.3) !important;padding: 10px 0px;}
	.team-accordion .accordianItem .glyphicon-chevron-down{display:none;}
	.team-accordion .collapsed .glyphicon-chevron-down{display:block !important;}
	.team-accordion .accordianItem .glyphicon-chevron-up{display:block;}
	.team-accordion .collapsed .glyphicon-chevron-up{display:none !important;}

/* Pagination Arrows */
	.next-layout {position: absolute;right: 0px;bottom: 30px;}
	.next-layout a{text-decoration:none;}
	.next-arrow-l {position: absolute;left: 100px;}
	.next-arrow-r {position: absolute;right: 100px;}
	
/* Input type - checkbox and radio button  */
	input[type='checkbox'], input[type='radio']{background:none; opacity:0;}
	input[type='checkbox'] + span, input[type='radio'] + span{position:absolute; top:0; left:0; right:0; bottom:0;  background-repeat: no-repeat;display:inline-block;width:22px;height:22px;margin:-1px 4px 0 0;vertical-align:middle;background-color:#fff;border:solid 1px #0071b9;border-radius:3px;cursor:pointer;}
	input[type='radio'] + span , input[type='checkbox'] + span{top:4px; background: #FFFFFF; border: 1px solid #4D4D4D;border-radius: 2px;}
	input[type='checkbox'],  input[type='radio'], .checkbox_outer { height:18px;width:22px; position: relative; z-index: 10;}
	.checkbox_outer {position:relative; float: left; margin-right: 5px;margin-bottom: 5px;}
	.checkbox_inner_accordian {float: right;margin-right: 30px;}
	.txt-white input[type='text'] {color:#313131;}
	.remember-me {margin-left: 0px !important;}


/*Checkbox*/
	input[type="checkbox"]:checked + span{  background-color:#1450F5;padding-right: 10px;}
	input[type="checkbox"]:checked + span:before{color: #fff;content: '\2713';font-size: 22px;position: relative;top: -6px;left: 2px}
	input[type='radio'] + span {border-radius:100%}
	input[type='radio']:checked + span{ background-color: #1450F5;border: 2px #eae9e9 solid;border-style: solid;}
	.parent-item > input[type="checkbox"]:checked + span{  background-color:#1450F5;padding-right: 10px;padding-top: 10px;}
	.checkbox-label {margin-left:30px;line-height: 25px;color: #000000;}

/* Tooltips */
	.tooltips {position: relative;display: inline;}
	.tooltips p {position: absolute;width:250px;color: #ffffff;	height: 95px; width: 445px; margin-left: -97px; margin-top: -65px;padding:10px;text-align: left;	visibility: visible;	border-radius: 6px;	visibility: visible;	left: 100%;	z-index: 999;}
	.tooltips p:after {	content: '';	position: absolute;	bottom: 100%;	left: 50%;	margin-left: -8px;	width: 0; height: 0;	border-right: 8px solid transparent;	border-left: 8px solid transparent;}

	.tooltips p span{color: #ffffff;display:flex;padding-top: 17px;}
	.tooltips p a{color: #ffffff; margin-left: 0px;}
	.tooltips p img{float:left;margin-top: 8px;}

	.tooltips-warning p {background-color: #1450F5;}
	.tooltips-warning p:after {border-bottom: 8px solid #1450F5;;}
	.tooltips-success p {background-color: #ebedf0;}
	.tooltips-success p:after {border-bottom: 8px solid #ebedf0;}

	.message table {background-color: #deeed4;color: #313131 !important;padding:10px;border-radius: 6px;}
	.messageCell {padding: 10px;background: url('../img/backgrounds/KCOLSignupBackground.jpg') no-repeat;}
	.messageText span {margin-left: 15px; }
	.messageText span h4{display:none;}

/* Notifications */
    .feedback-cont {position: absolute;margin: auto;left: 0;right: 0;z-index: 999;text-align: left;width:70%;}
    .feedback-cont .ok {background-color: #58ab27}
    .feedback-cont .warning {background-color: #1a7fc0}
    .feedback-cont .error {background-color: #be2126;}
    .feedback-cont .fd-msg {line-height: 24px; padding: 21px 10px;color: #fff;float: left;max-width: 85%;}
    .feedback-cont .fd-icon {padding-left: 20px;padding-top: 13px;float: left;min-height: 66px;}
    .feedback-cont .fd-close {padding-right: 20px;float: right;padding-top: 18px;min-height: 66px;}

/* Small devices (Small Phones, 320px and up) */
@media (min-width : 320px) 
{ 
 /*Font sizes for Tablet */
 	.phone-logo {width: 152px; height: auto;}
 	.login-container h2 { color: #141414;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -1.6px; margin-left: -3px;}
   	h2.big-txt{ font-size: 16pt; }
    h3{ font-size: 12pt; }
	body{ font-size: 12pt; }
	header h1 {font-size: 17pt;}
	.pagination-cont div {padding:5px;}
	.footer-pag{margin-top: 20%;}
	.team-container select {height: 36px;}
	header img {width: 85px;height: auto;}
	header { background-color: #fff; height: 55px; }
	.login-container { width: 90%;margin:auto; font-size:12pt;margin-top: 255px;}
	header img { float: left;width: 85px; height: auto; margin-top: 0px;}
	.btn-login { max-width:100px;}
	.changePassword div [class*=col] { padding-top: 0px; }
}

/* Small devices (Phones, 480px and up) */
@media (min-width : 480px) 
{ 
 /*Font sizes for Tablet */
 	.phone-logo {width: 180px; height: auto;}
 	.login-container h2 { color: #141414;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -1.6px; margin-left: -3px;}
   	h2.big-txt{ font-size: 16pt; }
    h3{ font-size: 12pt; }
	body{ font-size: 12pt; }
	header h1 {font-size: 20pt;}
	.pagination-cont div {padding:5px;}
	.footer-pag{margin-top: 20%;}
	.team-container select {height: 36px;}
	header img {width: 85px;height: auto;}
	header { background-color: #fff; height: 55px; }
	.login-container { width: 90%;margin:auto; font-size:12pt;margin-top: 255px;}
	header img { float: left;width: 85px; height: auto; margin-top: 0px;}
	.btn-login { max-width:100px;}
	.changePassword div [class*=col] { padding-top: 0px; }
	.form-signin {
		position: relative;
		border-radius: var(--radius-radius_m, 16px);
		background: var(--color-surface-surface_bg, #FFF);
		width: 588px;
		height: 100%;
		padding: var(--spacing-spacing_48, 48px) var(--spacing-spacing_40, 40px);}
	.form-signin::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		opacity: 0.8;
		z-index: -1; /* Place the pseudo-element behind other content */
		border-radius: inherit;
	}
}


/* Small devices (tablets portrait, 768px and up) */
@media (min-width : 768px) 
{ 
 /*Font sizes for Tablet */
 	.phone-logo {width: 180px; height: auto;}
 	.login-container h2 {
		color: #141414;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -1.6px;margin-left: -3px;}
    h1{ font-size: 30pt; }
    h2.big-txt{ font-size: 16pt; }
    h3{ font-size: 12pt; }
	body{ font-size: 12pt; }
	header h1 {padding-top:30px;font-size: 32px;}
	.pagination-cont div {padding:5px;}
	.footer-pag{margin-top: 20%;}
	.team-container select {height: 36px;}
	header { background-color: #fff; height: 104px; }
	header h1 { color: #000; margin: 0px;float: left;}
	header img { float: left;margin-top: 30px;width: 113px; height: 48px;margin-left: 50px;}
	.login-container { width: 690px;margin:auto; font-size:14px;margin-top: 70px;}
	.btn-login { max-width:inherit;}
	.changePassword div [class*=col] { padding-top: 12px; }
	.form-signin {
		position: relative;
		border-radius: var(--radius-radius_m, 16px);
		background: var(--color-surface-surface_bg, #FFF);
		width: 588px;
		height: 100%;
		padding: var(--spacing-spacing_48, 48px) var(--spacing-spacing_40, 40px);}
	.form-signin::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		opacity: 0.8;
		z-index: -1; /* Place the pseudo-element behind other content */
		border-radius: inherit;
	}
	.btn-md{ 
	margin-left: -120px;
    color:  #1450F5;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;margin-top: 28px;}
}
	
/* Medium devices (Tablets landscape, 1024px and up) */
@media (min-width : 1024px)
{   
/* Font sizes for Desktop */
	h1{ font-size: 30pt; }
	h2{ font-size: 16pt; }
	h3{ font-size: 12pt; }
	body{ font-size: 12pt;}
	header h1 {padding-top:35px;margin-left: 10px;}
	.pagination-cont div {padding:5px;}
	.footer-pag{margin-top: 15%; }
	.team-container select {height: 36px;}	
.login-container { width: 696px;margin:auto; font-size:14px;margin-top: 60px;}
.form-signin {
		position: relative;
		border-radius: var(--radius-radius_m, 16px);
		background: var(--color-surface-surface_bg, #FFF);
		width: 502px;
		height: 100%;
		padding: var(--spacing-spacing_48, 48px) var(--spacing-spacing_40, 40px);}
	.form-signin::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		opacity: 0.8;
		z-index: -1; /* Place the pseudo-element behind other content */
		border-radius: inherit;
	}
	.btn-md{ 
	margin-left: -107px;
    color:  #1450F5;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;margin-top: 28px;
	}

}
	
/* Large devices (Desktops, 1440px and up) */
@media (min-width : 1440px) 
{ 
/* Font sizes for Desktop */
    h1{ font-size: 26px !important;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: -1.4px;}
    h2{ font-size: 24pt;}
    h3{ font-size: 18pt;}
	body{ font-size: 16pt;}
	header h1 {padding-top:20px; margin-top:15px;}
	.pagination-cont div {padding:0px;}
	.footer-pag{margin-top: 10%; }
	.team-container select {height: 42px;}
	.login-container { width: 847px;margin:auto; font-size:14px;margin-top: 140px;}
    .form-signin {
		position: relative;
		border-radius: var(--radius-radius_m, 16px);
		background: var(--color-surface-surface_bg, #FFF);
		width: 588px;
		height: 100%;
		padding: var(--spacing-spacing_48, 48px) var(--spacing-spacing_40, 40px);}
	.form-signin::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		opacity: 0.8;
		z-index: -1; /* Place the pseudo-element behind other content */
		border-radius: inherit;
	}
	.btn-md{ margin-left: -155px;
    color:  #1450F5;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;margin-top: 28px;}
	
}
.input-container {
    display: flex;
    align-items: center;
}

.icon-container {
    margin-left: -60px;
}

.password-input-container {
    display: flex;
    align-items: center;
}

.password-icon-container {
    margin-left: -60px;
}