@charset "UTF-8";
/* CSS Document */
body {
  font-family: "effra", sans-serif;
  font-weight: normal;
  font-style: normal;	
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  color: #333	
}


body.login-page {
    max-width: 100%;
    overflow: hidden;	
	background-color: #D7D8D6; 
    background: url(/images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
	
}

.login-box-left{
	background-color:#f5f5f5;
	min-height: 60vh;
	color: #808080;
	padding: 40px 40px 80px 40px;
}

.login-container{
margin-top: 15vh;	
}	
	
.login-box-right{
background-color: white; 
min-height: 60vh; 
display:table;
}


.alert{	
top:15px;
position: fixed;
float: right;
z-index: 999;
padding-left: 25px;    
}

.alert-top-success{
color: #222222;
background-color: #fdb913;
border-color: #fdb913
}

.open>.dropdown-menu{
     padding: 0;
    border: none;
    border-radius: 0;
}

.dropdown-menu>li>a{
    padding: 20px 15px;
}
/* form style */ 

input.input-hsbc {
    font-family: "effra", sans-serif;
    font-weight: normal;
    font-style: normal;
	color: #333333;
    width: 100%;
    border: none;
    border-bottom: 1px solid #333333;
    padding: 10px 0;
	font-size: 2em;
}
input.input-hsbc:focus {
    border-color: #000000;
}
input.input-hsbc ~ label {
    font-family: "effra", sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.5px;	
    color: #333333;
    position: absolute;
    top: 14px;
    left: 0;
    cursor: text;
    transition: all 0.2s;
}
		
input.input-hsbc ~ label.active {
    font-size: 1em;
    top: -15px;
    color: #000000;
}

input.input-hsbc.error{
    border-bottom: 1px solid #a8000b;
}

input.input-hsbc ~ label.error {
    color: #a8000b;
    font-size: 0.75em;
    position: absolute;
    top: auto;
    bottom: -30px;
    left: 0
}

.form-group-hsbc {
    position: relative;
    margin-bottom: 30px
}

input:focus {
    outline: none;
}

.form-group{
position: relative;
margin-bottom: 30px;
}

.frame-with-footer{
width:100%; 
height:calc(100vh - 75px); /* See frame-footer notes */ 
/* overflow: scroll; */
}

.frame-with-footer-alt{
width:100%; 
height:calc(100vh - 75px); /* See frame-footer notes */ 
/* overflow: scroll; */
overflow-y: scroll;
	
}

.frame-footer{
background-color: #253038;
color: #fff;	
margin: 0 -15px;
width: calc(100% + 30px); /* This is to cancel out the margin minus. */
height: 75px; /* height must be the same as the frame-with-footer height minus */ 	
padding: 15px;
	
}

.frame-sidebar{
color: #fff;	
background-color: #767676;	
height:calc(100vh - 75px); /* See frame-footer notes */ 
overflow: scroll;
padding: 15px;
padding-right: 30px;
padding-top: 50px;	
}

.pull-margin-fix{
/* padding-right: 0px;	*/
}

.navbar-default .navbar-nav>li>a{
color: #333333;	
}
.navbar-header{
padding: 5px 15px;	
margin-bottom: 10px;
border-bottom: 1px solid #767676;	
}

.frame-scroll{
height: calc(100vh - 95px);
overflow-y: scroll;
}

.logout-fixed{
bottom: 15px; 
position: absolute; 
left: 15px;	
}


/* Modal */
.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 80%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

.modal-content{
box-shadow: none;
border-radius: 0px;
border: none;
padding: 15px;
background-color: #d7d8d6;	
}

closemodal{
float: right;
color: #db0011;
margin-right: -15px;
margin-top: -10px;	
}

copyright{
bottom:30px;
position: absolute; 
text-align:center; 
colour:#000;	
}

/* Media Manager */ 
.thumbnail{
padding: 0px;
border-radius: 0px;
border: 1px solid #000;
}


.navbar-fixed-side .navbar-nav>li>a{
color: #000;	
} 

.navbar-fixed-side .navbar-nav>li>a:hover, 
.navbar-fixed-side .navbar-nav>li>a:focus, 
.navbar-fixed-side .navbar-nav .dropdown-menu>li>a:hover, 
.navbar-fixed-side .navbar-nav .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover{
background-color: #fdb913;	
color: #000;	
font-weight: 800;
}

.navbar-default .navbar-nav>.active>a{
background-color: #fed571;	
font-weight: 800;
color: #000;	
}

/* Forms */

.input-lg{
border-radius:0px;
border-color: #fff;	
}
.form-control{
box-shadow: none;	
}

.form-control:focus{
border-color: #008580;
outline: 0;
box-shadow: none;	
}

.mb10{
margin-bottom: 10px !important;
}

.right{
float: right;
}

.input-error{
color: #a8000b;	
}

span.input-alert{
color: #a8000b;	
}
span.input-alert:before{
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;	
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f071";
  color: #a8000b;	
  margin-right: 5px;
  width: 1em;
  height: 1em;	
}

input.input-error{
border-color: #a8000b;
}


/* Email Preview */ 

.email-preview{
background-color: #fdb913;
height: calc(100vh - 75px); 
padding: 0;
animation-name: loading;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@-webkit-keyframes loading {
    0%   {background-color: #fdb913;}
    50% {background-color: #fed571;}
	100%   {background-color: #fdb913;}
	
}

/* Standard syntax */
@keyframes loading {
    0%   {background-color: #fdb913;}
    50% {background-color: #fed571;}
	100%   {background-color: #fdb913;}

}	


.modal-textarea{
width: 100%;height: 300px; resize: none;	
}

.primary-c{
 color: #fdb913;	
}

.danger-c{
 color: #c9302c;	
}

.mce-tinymce{
    margin-bottom: 10px !important;
}


email_locked{
    background-color: rgba(255,255,255,.4);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 9999;
}

.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{
    border-radius: 0;
}
.jconfirm .jconfirm-box .jconfirm-buttons button{
    border-radius: 0;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
body.login-page{
overflow: scroll;
}		

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
body.login-page {
	background-color: #D7D8D6; 
}
	
.login-container{
margin-top: 0;	
}
.login-box-right{
min-height: 100%;
}
.login-box-left{
min-height: 100%;
}
.frame-with-footer{
width:100%; 
height:calc(100vh - 159px); /* See frame-footer notes */ 
overflow: scroll;
}
.frame-with-footer-alt{
width:100%; 
height:calc(100vh - 159px); /* See frame-footer notes */ 
overflow: scroll;
}	
	
.frame-sidebar{
height:100%; /* See frame-footer notes */ 
padding: 15px;
}	
	
.logout-fixed{
position: relative;
}
.pull-margin-fix{
padding-right: 15px;	
}
}
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}