.tables{
    display: table;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.tables-cell{
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}
.cl-modal{
  background: rgba(0,0,0,0.4);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9998;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  overflow-y: scroll;
}
.cl-con{
  background-color: #f3f3f3;
  width:100%;
  max-width: 760px;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  margin:10px;
  position: relative;
}
.cl-close-btn{
  top:20px;
  position: absolute;
  right: 20px;
}
.cl-client-logo{
  text-align: center;
  height: 100%;
  border-right: 1px solid #dedede;
  padding: 20px;
}
.cl-client-logo img{
  width: 160px;
  margin-left: -20px;
}
.flex-container{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex; /* Safari */
	display: flex; /* Standard syntax */
}
.flex-container .column{
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
}
.cl-login-con{
  padding: 20px 40px;
}
.cl-title{
  font-size: 18px;
  color:#1d3058;
  text-transform: uppercase;
  padding-bottom: 5px;
  font-weight: 400;
}
.cl-title:after{
  content:" ";
  width: 100px;
  height: 2px;
  background-color: #1d3058;
  display: block;
  text-align: center;
  margin: 5px auto 20px auto;
}

.cl-login-con input{
  width: 100%;
  border-radius: 10px;
  border:1px solid #afafaf;
  padding: 12px;
  margin-bottom: 15px;
  color: #000;
  font-size: 12px;
  font-style: normal !important;
}
.cl-login-con input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
  opacity: 1; /* Firefox */
  font-weight: bold;
}
.cl-login-con input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
  font-weight: bold;
}
.cl-login-con input::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
  font-weight: bold;
}
.cl-login-con input:focus{
  outline: none;
  border: 1px solid #88cdd3;
}

.cl-login-con select{
  width: 100%;
  border-radius: 10px;
  border:1px solid #afafaf;
  padding: 12px;
  margin-bottom: 15px;
  color: #000;
  font-size: 12px;
  font-style: normal !important;
}
.cl-login-con select::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
  opacity: 1; /* Firefox */
  font-weight: bold;
}
.cl-login-con select:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
  font-weight: bold;
}
.cl-login-con select::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
  font-weight: bold;
}
.cl-login-con select:focus{
  outline: none;
  border: 1px solid #88cdd3;
}

input.cl-login-btn{
  width: 50% ;
  background-color: #1d3058;
  color: #fff ;
  font-weight: bold;
  border-radius: 40px;
  margin-top:15px;
  margin-bottom: 30px;
}
input.cl-login-btn:hover{
  background-color: #233b6e;
}

.msg_error{
  width: 100%;
  border-radius: 10px;
  border:1px solid #FF8888;
  padding: 5px;
  margin-bottom: 15px;
  color: #FF0000;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  font-style: normal !important;
  background: #FFDDDD;
}

.msg_note{
  width: 100%;
  border-radius: 10px;
  border:1px solid #FF88FF;
  padding: 5px;
  margin-bottom: 15px;
  color: #FF00FF;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  font-style: normal !important;
  background: #FFDDFF;
}

.px12,
.px12 a{
  font-size: 12px;
  color: #1d3058;
}
.cl-footer-logo{
  margin-top: 30px;
}
.cl-footer-logo img{
  width: 150px;
}
/* responsive setting */
@media(max-width:991px) {
  .cl-con{
    width:90%;
  }
  .flex-container,
  .flex-container .column{
    width: 100%;
    display: block;
  }
  .cl-client-logo {
    border-bottom: 1px solid #dedede;
    border-right: 0px;
  }
  .cl-client-logo img{
    width: 96px;
    margin-left: auto;
  }
  .cl-login-con{
    padding: 20px 0px;
  }
  .px12,
  .px12 a{
    font-size: 11px;
  }
}