/* =======================================================
*
* 	Body
*
* ======================================================= */

body {
    font-family: 'Spectral', serif;
    padding-top: 60px;
}

@media (min-width: 768) {
    .navbar-nav .dropdown-menu .caret {
        transform: rotate(-90deg);
    }

    body {
        padding-top: 120px;
    }
}

.navbar-header a {
    position: relative;
    margin-right:-40px;
    z-index:100;
}

.navbar-header a img {
    width: 80%;
    position: relative;
    margin-top: -15px;
    min-height:30px;
}
/* =======================================================
*
* 	Titile of every page 
*
* ======================================================= */

h2 {
    background-color: lightblue;
    padding: 15px 20px;
    font-weight: 600!important;
    font-size: 20px!important;
    color: black;
    text-align: center;
}

/* =======================================================
*
* 	Sub Menu (navigation)
*
* ======================================================= */

/*.submenu {
    display: none;
}

    .submenu li {
        list-style: none;
    }

        .submenu li a {
            display: block;
            text-decoration: none;
            color: black;
            padding: 5px;
            -webkit-transition: all 0.25s ease;
            -o-transition: all 0.25s ease;
            transition: all 0.25s ease;
            margin-left: -15px;
        }*/

.navbar {
    /*background-color:#51719A;*/
    background-color:#ffffff;
}

.navbar .navbar-toggle {
  border-color: #51719A;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #ffffff;
  color:#51719A;
}
.navbar .navbar-toggle .icon-bar { /*3 lines before*/
  background-color: #51719A;
}

.navbar .navbar-toggle:hover .icon-bar,
.navbar .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #51719A;
}

.nav li {
    width: 160px;
    text-align: center;
    font-size: 14px;
}

.nav li > a:only-child:after { /*20171220*/
    content: '';
}

.nav > li > a:after {
    /*content: ' ▾';*/ /*20171220 END*/
}

.dropdown-menu li a,
.nav-pills li a {
    text-align: left;
}

.dropdown-menu li > a:only-child:after { /*20171220*/
    content: '';
}

.dropdown-menu > li > a:after {
    /*content: ' ▾';*/ /*20171220 END*/
}

.dropdown-menu li a:hover,
.submenu li a:hover {
    background-color: transparent;
    border-left: 5px solid deepskyblue;
    padding-left: 10px;
    color: deepskyblue;
}

.nav a:hover {
    background-color: transparent!important;
    color: deepskyblue!important;
}

.nav > .active > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: transparent!important;
    border-left: 5px solid deepskyblue;
    border-right: 5px solid deepskyblue;
    padding-left: 10px;
    color: deepskyblue;
}

.navbar-brand {
    color:black;
}

@media (max-width: 768px) {
    .nav > .active > li > a,
    .nav > .active > a:hover,
    .nav > active > a:focus,
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
        background-color: transparent!important;
        border-left: 5px solid deepskyblue;
        border-right: 5px solid deepskyblue;
        padding-left: 10px;
        color: deepskyblue;
    }

    .nav li {
        text-align: left;
        width: 160px;
        font-size: 15px;
        display: block;
    }

    .dropdown-menu {
        margin-left: 35%;
        position: absolute;
    }
}

/* Show the dropdown menu on hover */
@media (min-width: 768px) {
    li:hover > ul {
        display: block;
    }

        li:hover > ul > li:hover > ul, li:hover > ul > li:focus > ul {
            display: block;
            float: right;
            top: 68%;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    /*.dropdown-toggle:hover {
        background-color: #3e8e41;
    }*/
}

/* =======================================================
*
* 	logout
*
* ======================================================= */

.logout {
    text-align: right;
}

/* =======================================================
*
* 	pagination-page
*
* ======================================================= */

.pagination-page {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination-page table > tbody > tr > td {
        display: inline;
    }

        .pagination-page table > tbody > tr > td > a,
        .pagination-page table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #337ab7; /*color of text*/
            background-color: #ffffff;
            border: 1px solid #dddddd;
            margin-left: -1px;
        }

        .pagination-page table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            margin-left: -1px;
            z-index: 2;
            color: #aea79f;
            background-color: #f5f5f5;
            border-color: #dddddd;
            cursor: default;
        }

        .pagination-page table > tbody > tr > td:first-child > a,
        .pagination-page table > tbody > tr > td:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        }

        .pagination-page table > tbody > tr > td:last-child > a,
        .pagination-page table > tbody > tr > td:last-child > span {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        }

        .pagination-page table > tbody > tr > td > a:hover,
        .pagination-page table > tbody > tr > td > span:hover,
        .pagination-page table > tbody > tr > td > a:focus,
        .pagination-page table > tbody > tr > td > span:focus {
            color: black;
            background-color: #eeeeee;
            border-color: #dddddd;
        }

/* =======================================================
*
* 	carousel 
*
* ======================================================= */

/* Makes images fully responsive */

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: 250px;
}

/* ---------- carousel styling ---------- */

.carousel-inner {
    /*border-radius: 15px;*/
}

.carousel-caption {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 0 0 10px 25px;
    color: #fff;
    text-align: left;
}

.carousel-indicators {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 15;
    margin: 0;
    padding: 0 25px 25px 0;
    text-align: right;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.carousel-control.left {
    
  background-repeat: repeat-x;
    color: black;
}

.carousel-control.right {
    color: black;    
}


/* =======================================================
*
* 	footer 
*
* ======================================================= */

.footer-bottom {
    padding: 5px;
    background: #1e1e1e;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index:100;
}

.footer-bottom select{
    margin-top: 9px;
    text-align:left;
    float: left;
}

.footer-bottom p{
    color: #ccc;
    margin-top: 9px;
    text-align:right;
    float: right;
}

/*width for select (footer language)*/
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: auto;
}

/* =======================================================
*
* 	label bold
*
* ======================================================= */
.control-label.lbl-bold {
            font-weight: bold;
}


/* =======================================================
*
* 	login
*
* ======================================================= */
.main {
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
    box-shadow: 15px 10px 35px 0px rgba(0,0,0,0.24);
    padding: 12px;
    /*background: #222222;*/
    background-color: rgba(34,34,34,0.8);
    /*background-color:rgba(255,254,252,0.8);*/
    height:auto;
	margin-top:10px;
}

.left-side {
    padding: 0px 0px 0px;
}

    .left-side h3 {
        font-size: 30px;
        font-weight: 900;
        color: #FFF;
        /*color:#5B5B5B;*/
        /*padding: 30px 12px 00px 26px;*/
        padding-top: 20px;
        text-align: center;
    }

    .left-side h5 {
        font-size: 15px;
        color: #FFF;
        /*padding: 10px 12px 00px 26px;*/
        padding: 18px 20px 00px 18px;
        line-height: 20px;
        text-align: justify;
    }

.right-side {
    padding: 12px 0px 49px;
    background: #FFFEFC;
    /*background: #222222;*/
    background-size: cover;
    min-height: 414px;
}

    .right-side h2 {
        padding: 11px 20px;
        font-weight: 600!important;
        font-size: 20px!important;
        color: #222222;
        text-align: center;
        /*background-color:#FFFAEE;*/
    }

.login-bg {
    /* Location of the image */
    background-image: url(../images/Lexis-Hibiscus-Port-Dickson.jpg);
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: cover;
    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #464646;
}

.slide-background {
    background: #333;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

@media (max-width: 768px) {   
    .left-side {
        display:none;
    }
}
/* =======================================================
*
* 	Paging
*
* ======================================================= */
.pagination-page {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination-page table > tbody > tr > td {
        display: inline;
    }

        .pagination-page table > tbody > tr > td > a,
        .pagination-page table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #337ab7; /*color of text*/
            background-color: #ffffff;
            border: 1px solid #dddddd;
            margin-left: -1px;
        }

        .pagination-page table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            margin-left: -1px;
            z-index: 2;
            color: #aea79f;
            background-color: #f5f5f5;
            border-color: #dddddd;
            cursor: default;
        }

        .pagination-page table > tbody > tr > td:first-child > a,
        .pagination-page table > tbody > tr > td:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        }

        .pagination-page table > tbody > tr > td:last-child > a,
        .pagination-page table > tbody > tr > td:last-child > span {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        }

        .pagination-page table > tbody > tr > td > a:hover,
        .pagination-page table > tbody > tr > td > span:hover,
        .pagination-page table > tbody > tr > td > a:focus,
        .pagination-page table > tbody > tr > td > span:focus {
            color: black;
            background-color: #eeeeee;
            border-color: #dddddd;
        }