@font-face {
    font-family: mainFont;
    src: url(fonts/Titillium/TitilliumWeb-Regular.ttf);
}

@font-face {
    font-family: notoFont;
    src: url(fonts/Noto/NotoKufiArabic-Regular.ttf);
}
html,
body {
    height: 100%;
    background-color: #3D6177;
    font-family: notoFont,mainFont;
}

.navbar-inverse{background-color: #303E47;box-shadow: 0 5px 3px -2px gray;}
.navbar-inverse .navbar-nav li a, .navbar-inverse .navbar-nav li button.btn-link{color:#fff !important;}
.navbar-inverse .navbar-nav ul.dropdown-menu li a, .navbar-inverse .navbar-nav ul.dropdown-menu li button.btn-link, .navbar-inverse ul.dropdown-menu li a.navbar-brand{color:#000 !important;}
.navbar-inverse .navbar-nav li a:hover, .navbar-inverse .navbar-nav li button.btn-link:hover,.navbar-inverse a.navbar-brand:hover{color:#31BADB !important;}
.navbar-inverse a.navbar-brand{color:#fff !important;}


.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    width:100%;
    padding: 110px 15px 20px;
}
nav > .container {
    width:100%;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}


h1.title{font-size: 22px;font-weight: bolder;color:#303E47;margin:0px;padding:3px 0px;}

table thead th a:hover{color: #31BADB;}
div.grid-view table thead th:first-child{width:80px;}

table.detail-view th{width:20%;}
div.div-form{background-color: #F5F5F5;}
div.div-form form{padding:20px}
/*div.div-form form .form-control{box-shadow: none;border-radius:0; width:100%;min-height: 50px;font-size: 20px;color:#3D6177;}*/

div.toolbar{
    position: fixed;
    display: inline-block;
    margin-top:50px;
    background-color: lightgray;
    width: 100%;
    padding: 5px;
    z-index: 1000;
}
div.toolbar div.block{float:left;}
div.toolbar div.first{text-align: left;width:30%;}
div.toolbar div.second{text-align: center;}
div.toolbar div.third{float: right;}
div.summary{text-transform: uppercase;padding-top:7px;color:#3D6177; }

div.row-float{display: inline-block;padding: 10px;width: 100%;vertical-align: top;}

li.search-choice{height: 40px;}

div.site-index{width:80%;margin:0 10%;text-align: center;}
div.site-index .btn-item{width:120px;height: 120px;text-align: center;font-size: 20px; background-color: #303E47;color:#fff;margin:10px;border-radius: 0;padding-top:20px;}
div.site-index .btn-item:hover{color:#31BADB;}

ul.pagination{float:right;margin:0 10px;padding: 0;}
div.summary{float:right;}

.navbar .divider-vertical {
    height: 3px;
    margin: 0 9px;
    border-bottom: 1px solid #303E47;
}

.navbar-inverse .divider-vertical {
    border-bottom: 1px solid #303E47;
}

img.form-image{width:200px;border:1px solid gray;}

div.capture{position: fixed;display: none;width:30%;top:20%;left:35%;border:1px solid gray;background-color: #3D6177;padding:20px;z-index: 1000;}
video#player{width:90%;margin:5%;border:2px inset #fff;}
div.toggle{width:64px !important;height:35px !important;margin-top:10px;}
h4.settings-title{background-color: #3D6177;color:#fff;width:100%;padding:5px;margin:0;cursor: pointer;}

div.div-wait{position: fixed;display: none;top:0;left:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 999;}

div.view-bottom{width:100%;background-color: #F5F5F5;}

div.common-form{
    background-color: #eee;
    color:#000;
}

div.ui-dialog{z-index: 9999;}

@media (max-width: 767px) {
    .navbar-collapse .nav > .divider-vertical {
        display: none;
     }
}