* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: Raleway-Regular;
    src: url(font/Raleway-Regular.html)
}

@font-face {
    font-family: Raleway-Medium;
    src: url(font/Raleway-Medium.html)
}

@font-face {
    font-family: Raleway-Thin;
    src: url(font/Raleway-Thin.html)
}

@font-face {
    font-family: Raleway-Light;
    src: url(font/Raleway-Light.html)
}

textarea {
    resize: none;
}

body {
    background-color: transparent;
    cursor: default;
    font-family: Raleway-Regular;
    font-size: 0.8em;
}

.BNI-MainHead-OrWh {
    background-color: #006884;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0;
}

.BNI-MainHead-OrWh .col-12 {
    padding: 0;
}

.BNI-MainHead-OrWh a {
    color: #ffffff;
    font-weight: bold;
}

.BNI-SecondaryHead-OrWh {
    background-color: #fed9a1;
    color: #000000;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #fff;
}

.BNI-Content-OrWh {
    background-color: #ffffff;
    color: #000000;
    padding: 5px 10px;
}

.BNI-BorderRadius {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.BNI-BorderRadius-Top {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.BNI-BorderRadius-Bot {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.BNI-BorderRadius-Left {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.BNI-BorderRadius-Right {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.BNI-White {
    background-color: #ffffff;
}

.BNI-Black {
    background-color: #000000;
}

.BNI-Red {
    background-color: #fd0000;
}

.BNI-Turquoise {
    background-color: #006884;
}

.BNI-Orange {
    background-color: #f15921;
}

.BNI-DarkOrange {
    background-color: #f47921;
}

.BNI-DarkAqua {
    background-color: #004b4b;
}

.BNI-DarkBlue {
    background-color: #0166b3;
}

.BNI-DarkGreen {
    background-color: #005B2A;
}

.BNI-DarkGray {
    background-color: #6b533f;
}

.BNI-MediumOrange {
    background-color: #f7931d;
}

.BNI-MediumAqua {
    background-color: #00aaad;
}

.BNI-MediumBlue {
    background-color: #069bda;
}

.BNI-MediumGreen {
    background-color: #32a543;
}

.BNI-MediumGray {
    background-color: #b2a291;
}

.BNI-LightOrange {
    background-color: #fed9a1;
}

.BNI-LightAqua {
    background-color: #eaedf6;
}

.BNI-LightBlue {
    background-color: #9ed3f1;
}

.BNI-LightGreen {
    background-color: #d0e39a;
}

.BNI-LightGray {
    background-color: #f2e6d8;
}

.BNI-TextColor-Black {
    color: #000000 !important;
}

.form-control, .custom-select, .picklist-form-control {
    border: 1px solid #f05923;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    font-size: 1em;
    padding: 5px 15px;
    color: #000000;
}

/*
For disable picklist only
*/
.va-picklist-disabled-form-control {
    border: 1px solid #f05923;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    font-size: 1em;
    padding: 5px 15px;
    color: #000000;
    background: #e2e6ea;
    pointer-events: none;
}

.form-control:focus, .custom-select:focus, .picklist-form-control:focus {
    color: #000000;
    background-color: #fff;
    border-color: #f05923;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(244, 121, 33, .25);
}

.BNI-Button {
    text-align: right;
}

.BNI-Button-Yes {
    border: 0px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #006884;
    color: #fff !important;
    padding: 5px 20px;
    margin-left: 5px;
    cursor: pointer;
}

.BNI-Button-No {
    border: 0px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #fd0000;
    color: #fff !important;
    padding: 5px 20px;
    margin-left: 5px;
    cursor: pointer;
}

.BNI-Button-General {
    border: 0px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #f15921;
    color: #fff !important;
    padding: 5px 20px;
    margin-left: 5px;
    cursor: pointer;
}

/* Feliz */
.BNI-Button-General-2 {
    border: 0px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #f15921;
    color: #fff !important;
    padding: 5px 10px;
    cursor: pointer;
}

/* Adhitya */
.BNI-Message {
    text-align: center;
    font-style: italic;
}

.BNI-Message img {
    padding: 5px;
    padding-left: 0px;
}

section .nav .active {
    color: #ffffff;
    background-color: #f7931d;
}

section .nav a {
    color: #ffffff;
}

section .nav a:hover {
    text-decoration: underline;
}

.pre {
    margin: 0;
}

.preWrap {
    font-family: Raleway-Regular;
    text-align: justify;
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -ms-pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-all;
    font-size: 0.8em;
    line-height: 1.5;
}

.BNI-Select {
	border-radius: 15px;
    padding: 10px;
    border-color: #f7931d;
    height: 200px;
    width: 200px;	
}

#content {
    min-height: 500px;
}

.mandatory {
    font-weight: bold !important;
}

.tnc a {
    color: blue !important;
    text-decoration: underline;
}

.tnc a:hover {
    font-weight: bold;
}

.refno a {
    color: black;
    text-decoration: underline;
}

.refno a:hover {
    color: blue;
    text-decoration: underline;
    font-weight: bold;
}

@font-face {
    font-family: 'icomoon';
    src: url('font/icomoon/icomoon.html') format('embedded-opentype'),
    url('font/icomoon/icomoon-2.html') format('truetype'),
    url('font/icomoon/icomoon-3.html') format('woff'),
    url('font/icomoon/icomoon-4.html') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-minus:before {
    content: "\e900";
}

.icon-plus:before {
    content: "\e901";
}

.icon-minus-outline:before {
    content: "\e902";
}

.icon-add-outline:before {
    content: "\e903";
}

/* Start Side Menu */
a.menu-item.active {
    font-weight: bold;
    color: #006884 !important;
    font-size: 1.15em !important;
}

/* End Side Menu */


/* Start Shrink Header */
.shrink-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #f15921;
    color: #ffffff;
    font-size: 0.95em;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.95);
    z-index: 99;
    transition: visibility 0s, opacity 0.5s linear;
}

.col-shrink {
    padding: 10px;
    line-height: 30px;
}

.ellipsis-left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right !important;
}

.ellipsis-right {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left !important;
}

.pipe-left:after {
    content: '|';
}

.shrink-header a {
    color: #ffffff;
    font-weight: bold;
}

.shrink-header a:hover {
    text-decoration: none;
}

/* End Shrink Header */

/* Start Bottom Bar */
.bottom-marquee-text {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
    background: #006884;
    color: #FFFFFF;
}

/* End Bottom Bar */

.font-color-red{
	color: #fd0000;
}

/* Global Navigation */
.pagination li {
	display:inline-block;
}
/* Selection Disable */
.bni-noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#VirtualAccount .BNI-Content-OrWh {
	align-items: center;
}
.no-wrap{
	white-space: nowrap;
}
.button-disabled{
	pointer-events: none; 
	background-color: lightgrey;
}

.nav-wrapper {
  width: 300px;
  margin: 100px auto;
  text-align: center;
}
  .sl-nav {
  display: inline;
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.sl-nav li {
  cursor: pointer;
  padding-bottom:10px;
}
.sl-nav li ul {
  display: none;
}
.sl-nav li:hover ul {
  position: absolute;
  top:29px;
  right:-15px;
  display: block;
  background: #fff;
  width: 120px;
  padding-top: 0px;
  z-index: 1;
  border-radius:5px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.sl-nav li:hover .triangle {
  position: absolute;
  top: 15px;
  right: -10px;
  z-index:10;
  height: 14px;
  overflow:hidden;
  width: 30px;
  background: transparent;
}
.sl-nav li:hover .triangle:after {
  content: '';
  display: block;
  z-index: 20;
  width: 15px;
  transform: rotate(45deg) translateY(0px) translatex(10px);
  height: 15px;
  background: #fff;
  border-radius:5px 0px 0px 0px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.sl-nav li ul li {
  position: relative;
  text-align: center;
  background: transparent;
  padding: 5px 5px;
  z-index: 2;
  color: #536466;
  border-bottom: 2px solid #f2e6d8;
}
.sl-nav li ul li:last-of-type {
  border-bottom:none;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover, .sl-nav li ul li span.active {
  color: #006884;
}
.sl-flag {
  display: inline-block;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
  width: 15px;
  height: 15px;
  background: #aaa;
  border-radius: 50%;
  position: relative;
  top: 2px;
  overflow: hidden;
}