"Original Dashboard"
Bootstrap 3.1.0 Snippet by Smithfield

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <!-- BEGIN HEAD --> <head> <meta charset="utf-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="description"> <meta content="" name="author"> <meta name="MobileOptimized" content="320"> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="/assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL PLUGIN STYLES --> <link href="/assets/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="/assets/plugins/data-tables/TableTools-2.2.1/css/dataTables.tableTools.css"> <link rel="stylesheet" type="text/css" href="/assets/plugins/data-tables/DT_bootstrap.css"> <!-- END PAGE LEVEL PLUGIN STYLES --> <!-- BEGIN THEME STYLES --> <link href="/assets/css/style-metronic.css" rel="stylesheet" type="text/css"> <link href="/assets/css/style.css" rel="stylesheet" type="text/css"> <link href="/assets/css/style-responsive.css" rel="stylesheet" type="text/css"> <link href="/assets/css/plugins.css" rel="stylesheet" type="text/css"> <link href="/assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"> <link href="/assets/css/custom.css" rel="stylesheet" type="text/css"> <link href="/assets/css/barclays.css" rel="stylesheet" type="text/css"> <!-- END THEME STYLES --> <link rel="shortcut icon" href="/favicon.ico"> </head> <!-- END HEAD --> <!-- BEGIN BODY --> <body class="page-header-fixed bg-lblue" style="background-color: rgb(255, 255, 255) !important;" marginwidth="0" marginheight="0"> <!-- BEGIN HEADER --> <div class="bar_nav_mid"> <div class="bar_search" role="search"> <div class="row"> <div class="col-md-6 bar_nav_mid_welcomeText"> OCR Dashboard </div> <div class="col-md-2"> <select class="form-control top_search" id="cSearchType"> <option>Doc ID</option> <option selected="selected">Libra ID</option> <option>Document Name</option> </select> </div> <div class="col-md-4"> <div class="input-icon right"> <i class="icon-search"></i> <input id="cSearchText" type="text" class="form-control top_search" placeholder="Search..."> </div> </div> </div> </div> </div> <!-- END HEADER --> <div class="clearfix"> </div> <!-- BEGIN CONTAINER --> <div class="page-container bg-lblue"> <!-- BEGIN SIDEBAR --> <div class="page-sidebar bg-lblue"> <!-- BEGIN SIDEBAR MENU --> <div class="row form"> <div class="form-body"> <div class="form-group"> <div class="col-md-12"> <label class="text-binfo"> <b>Date Range</b></label> <select id="cDateType" class="form-control"> <option selected="selected">Between</option> <option>Before</option> <option>After</option> </select> </div> </div> <div class="form-group"> <div class="col-md-12"> <div id="dtFromDiv" class="input-group date date-picker" data-date="18-May-2014" data-date-format="dd-M-yyyy" data-date-viewmode="years"> <input type="text" class="form-control" placeholder="dd-mmm-yyyy" value="18-May-2014" readonly=""> <i class="icon-remove-circle btncleardate"></i><span class="input-group-btn"> <button class="btn default date-set" type="button"> <i class="icon-calendar"></i> </button> </span> </div> <div class="bg-lblue" style="height: 1px"> </div> <div id="dtToDiv" class="input-group date date-picker" data-date="18-Jun-2014" data-date-format="dd-M-yyyy" data-date-viewmode="years"> <input type="text" class="form-control" placeholder="dd-mmm-yyyy" value="18-Jun-2014" readonly=""> <i class="icon-remove-circle btncleardate"></i><span class="input-group-btn"> <button class="btn default" type="button"> <i class="icon-calendar"></i> </button> </span> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="text-binfo"> <b>User Name</b></label> <div class="input-icon left"> <i class="icon-search"></i> <input id="cUserName" type="text" class="form-control" placeholder="User name..."> <i class="icon-remove-circle btnclear"></i> </div> <div class="checkbox-list"> <label class="checkbox"> <div class="checker" id="uniform-cAllUsers"><span class="checked"><input type="checkbox" id="cAllUsers" checked="checked" value="inlineCheckbox111"></span></div> All </label> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="text-binfo"> <b>Source</b> </label> <div class="checkbox-list"> <label class="checkbox-inline col-md-5"> <div class="checker" id="uniform-cSourceBAU"><span><input type="checkbox" id="cSourceBAU" value="inlineCheckbox211"></span></div> BAU </label> <label class="checkbox-inline"> <div class="checker" id="uniform-cSourceLegacy"><span><input type="checkbox" id="cSourceLegacy" value="inlineCheckbox222"></span></div> Legacy </label> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="text-binfo"> <b>Status</b> </label> <div class="checkbox-list"> <label class="checkbox-inline col-md-5"> <div class="checker" id="uniform-cDocStatusFail"><span class="checked"><input type="checkbox" id="cDocStatusFail" checked="checked" value="inlineCheckbox21"></span></div> Failed </label> <label class="checkbox-inline"> <div class="checker" id="uniform-cDocStatusPass"><span class="checked"><input type="checkbox" id="cDocStatusPass" checked="checked" value="inlineCheckbox22"></span></div> Passed </label> </div> </div> <div class="col-md-12"> <div class="checkbox-list"> <label class="checkbox-inline col-md-5"> <div class="checker" id="uniform-cDocStatusReject"><span><input type="checkbox" id="cDocStatusReject" value="inlineCheckbox23"></span></div> Rejected </label> <label class="checkbox-inline"> <div class="checker" id="uniform-cDocStatusAccept"><span><input type="checkbox" id="cDocStatusAccept" value="inlineCheckbox24"></span></div> Accepted </label> </div> </div> </div> <div class="form-group">  </div> <div class="form-group"> <div class="col-md-12 text-center"> <a class="btn default" href="javascript:void(0);" id="btnReset"><i class="icon-remove-sign">  </i>Clear</a> <a class="btn blue" href="javascript:void(0);" id="btnSearch2"><i class="icon-search"> </i>Search</a> </div> </div> </div> </div> <!-- END SIDEBAR MENU --> </div> <!-- END SIDEBAR --> <!-- BEGIN PAGE --> <div class="page-content"> <!-- BEGIN PAGE HEADER--> <div class="row" style="margin: 0px !important; padding: 0px !important;"> <div class="col-md-6" style="margin: 0; padding: 0;"> <h4 class="text-binfo"> OCR Search Results</h4> </div> <div class="col-md-6" style="margin: 0; padding: 0;"> <div id="divExport" class="pull-right"> <a href="#" class="btn btn-binfo"><i class="icon-print"></i></a> <a href="#" class="btn btn-binfo"><i class="icon-download-alt"></i></a> </div> </div> </div> <div class="table-responsive" id="TblSearchResultContainer" style="min-height:634px !important;height:634px !important;"> <div id="TblSearchResult_wrapper" class="dataTables_wrapper form-inline" role="grid"><div class="row"><div class="col-md-3 col-sm-12"><div id="TblSearchResult_length" class="dataTables_length"><label><select size="1" name="TblSearchResult_length" aria-controls="TblSearchResult" class="form-control input-small top9"><option value="10">10</option><option value="12" selected="selected">12</option><option value="15">15</option><option value="20">20</option><option value="30">30</option><option value="50">50</option></select></label></div></div><div class="col-md-5 col-sm-12 text-center"><div class="dataTables_info" id="TblSearchResult_info"></div></div><div class="col-md-4 col-sm-12"><div class="dataTables_paginate paging_bootstrap"><ul class="pagination"><li class="first disabled"><a href="#" title="First"><span class="glyphicon">?</span></a></li><li class="prev disabled"><a href="#" title="Previous"><span class="glyphicon">?</span></a></li><li class="next disabled"><a href="#" title="Next"><span class="glyphicon">?</span></a></li><li class="last disabled"><a href="#" title="Last"><span class="glyphicon">?</span></a></li></ul></div></div></div><div class="btn-hr"></div><div class="table-scrollable"><table class="table table-hover dataTable" id="TblSearchResult" aria-describedby="TblSearchResult_info" style="width: 970px; position: relative; zoom: 1;"> <thead> <tr role="row"><th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label=""></th><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 38px;">ID</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Libra ID: activate to sort column ascending" style="width: 49px;">Libra ID</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Date/Time: activate to sort column ascending" style="width: 66px;">Date/Time</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 95px;">Name</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label=" Pages #: activate to sort column ascending" style="width: 53px;"> Pages #</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="QA Score: activate to sort column ascending" style="width: 62px;">QA Score</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="User Name: activate to sort column ascending" style="width: 70px;">User Name</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Location: activate to sort column ascending" style="width: 55px;">Location</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 64px;">Status</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Source: activate to sort column ascending" style="width: 46px;">Source</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="TblSearchResult" rowspan="1" colspan="1" aria-label="Comments: activate to sort column ascending" style="width: 70px;">Comments</th></tr> <tr role="row"><th rowspan="1" colspan="1"> </th><th rowspan="1" colspan="1"><span class="filter_column filter_number"><input type="text" class="search_init number_filter form-control" value="DOC ID..." rel="1"></span></th><th rowspan="1" colspan="1"><span class="filter_column filter_number"><input type="text" class="search_init number_filter form-control" value="Libra ID..." rel="2"></span></th><th rowspan="1" colspan="1">   </th><th rowspan="1" colspan="1"><span class="filter_column filter_text"><input type="text" class="search_init text_filter form-control" value="Document Name..." rel="4"></span></th><th rowspan="1" colspan="1"><span class="filter_column filter_number"><input type="text" class="search_init number_filter form-control" value="Pages #..." rel="5"></span></th><th rowspan="1" colspan="1"><span class="filter_column filter_number"><input type="text" class="search_init number_filter form-control" value="QA Score..." rel="6"></span></th><th rowspan="1" colspan="1">   </th><th rowspan="1" colspan="1">   </th><th rowspan="1" colspan="1"><span class="filter_column filter_select"><select class="search_init select_filter form-control" rel="9"><option value="" class="search_init"> Doc. Status </option><option value="Passed">Passed</option><option value="Failed">Failed</option><option value="Approved">Approved</option><option value="Rejected">Rejected</option></select></span></th><th rowspan="1" colspan="1">   </th><th rowspan="1" colspan="1"><span class="filter_column filter_text"><input type="text" class="search_init text_filter form-control" value="Comments..." rel="11"></span></th></tr></thead> <tbody role="alert" aria-live="polite" aria-relevant="all"> </tbody> <div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.05; cursor: wait; position: absolute;"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; position: absolute; padding: 2px; margin: 0px; width: 30%; top: 25.5px; left: 339.5px; text-align: center; color: rgb(0, 0, 0); border: none; cursor: wait;"><img src="./assets/img/ajax-loading.gif" align=""></div></table></div></div> </div> <!-- END PAGE HEADER--> </div> <!-- END PAGE --> <div class="modal fade" id="updatestatus-modal" tabindex="-1" role="basic" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header text-binfo"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button> <h4 class="modal-title"> Approve / Reject</h4> </div> <div class="modal-body form-group"> <textarea id="txtComments" maxlength="500" rows="6" class="form-control" placeholder="Comment if relevant... It has a limit of 500 chars."></textarea> </div> <div class="modal-footer"> <div class="row"> <div class="col-md-6"> <button type="button" id="btnSaveRecord" class="btn green pull-left"> <i class="icon-ok"> </i>Approve</button> <button type="button" id="btnSaveRecord2" class="btn red pull-left"> <i class="icon-remove"> </i>Reject</button> </div> <div class="col-md-6"> <button type="button" class="btn dark" data-dismiss="modal"> Close</button> </div> </div> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> </div> <!-- END CONTAINER --> <!-- END BODY --> </body> </html>
body{ font-family: "HelveticaNeue-Bold", "Helvetica Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .bar_nav_head{ min-height: 55px; width: 100%; background-color: #FFFFFF; background: url(../barclays_imgs/header_bg_prt01.png) repeat; position: absolute; left: 0px; top: 0px; } .bar_nav{ min-height: 125px; font-weight: bold; } .bar_search{ float: right; padding-right: 50px; padding-left: 50px; margin-top: 18px; width: 100%; } .search_icon { position: absolute; top: 4px; right: -3px; display: block; width: 26px; height: 26px; cursor: pointer; } /*Search bar on the nav bar*/ .form-control.top_search{ border-style: solid; border-width: 1px; border-color: rgb(3, 121, 200); border-radius: 4px; background-color: rgb(4, 130, 214); box-shadow: 0px 0px 1px 0px rgb(255, 2255, 255); color: white !important; } .redCircle{ border-radius: 50%; width: 23px; background-color: #cc0000; color: #FFFFFF; text-align: center; margin-left: -15px; /* width and height can be anything, as long as they're equal */ } .bar_nav_mid{ background-color: #0099ff; background: url(../barclays_imgs/header_bg_prt02.png) repeat; position: absolute; left: 0px; top: 0px; width: 100%; min-height: 70px; z-index: -1; } .bar_nav_mid_userFunctions{ float: right; padding-top: 20px; padding-right: 25px; font-size: 16px; color: #ffffff; } .bar_nav_mid_userFunctions_table tr td{ padding-left: 10px; padding-right: 10px; } .bar_nav_mid_userFunctions_table tr td a{ color: #FFFFFF } .bar_nav_mid_userFunctions_table_item { border-left:solid 1px #ffffff; } .bar_nav_mid_welcomeText{ font-size: 26px; font-weight: bold; font-family: "HelveticaNeue-Neus", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #ffffff; padding-top: 0px; padding-left: 0px; letter-spacing:1px; word-spacing:10px; } .bar_nav_mainNav{ margin-top: 15px; color: #666666; font-size: 16px; } /*Removed table layout of nav bar*/ .bar_nav_mainNav ul{ /*padding-left: 25px; padding-right: 10px;*/ list-style-type: none; margin-top: 0px; padding-right: 10px; } /*Removed table layout of nav bar, list items*/ .bar_nav_mainNav li{ float: left; padding-right: 25px; /*padding-left: 10px*/; } .bar_nav_mainNav_headings{ padding-left: 25px; padding-right: 10px; } .bar_nav_mainNav_unselected{ font-weight: bold; color: #666666; } .bar_nav_mainNav_selected{ font-weight: bold; color: #003366; } .bar_logo { float: right; margin-right: 20px; margin-top: 8px; } .triangle-down { margin-top: -6px; width: 10px; height: 0; padding-left:10px; padding-top: 10px; overflow: hidden; -ms-transform: rotate(135deg); /* IE 9 */ -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */ transform: rotate(135deg); } /*extension of triangle-down for the home screen*/ .triangle-down.triangle_home{ margin-left: 55px; } /*extension of triangle-down for the dashboard*/ .triangle-down.triangle_dashboard{ margin-left: 235px; } .triangle-down:after { content: ""; display: block; width: 0; height: 0; margin-left:-500px; margin-top:-500px; border-left: 500px solid transparent; border-right: 500px solid transparent; border-top: 500px solid #ECECEC; } .bar_main{ margin-top: 50px; width: 100%; min-height: 600px; } .bar_main_icons{ padding-top: 150px; align-content: center; } .icon #icon_one{ float: left; margin-left: 20%; } .icon #icon_two{ float: right; margin-right: 20%; } .icon td{ font-size: 32px; color: #666666; font-weight: 200; text-align: center; } input, textarea { color: #000; } .placeholder { color: #aaa; } /*Side panel*/ .side_bar{ /*background-color: #007EB6;*/ background-color: rgb(191, 223, 245); /*Fall back colour (estimated)*/ background-color: rgba(0, 126, 182, 0.2); float: left; margin-left: 10px; margin-right: 5px; padding-top: 30px; padding-bottom: 30px; padding-left: 5px; padding-right: 5px; width: 260px; height: 100%; /*height: device-height;*/ padding-top: 30px; } /*sidebar headings*/ .sidebar_heading{ margin-top: 40px; font-size: 16px; font-weight: bold; color: #003366; } /*calendar rows*/ .calendar{ margin-bottom: 5px; } /*calendar icons*/ .calendar_icon { position: absolute; top: 4px; right: -3px; display: block; width: 26px; height: 26px; cursor: pointer; } /*calendar hyphen*/ .hyphen{ position: absolute; right: -100px; top: 5px; } /*checkbox alignment*/ .checkbox-inline.checkbox_separated{ width: 110px; margin-left: 0px; margin-bottom: 5px; } /*checkbox customisations*/ .checkbox.checkbox_extra{ border-color: rgb(191, 223, 245); border-color: rgba(0, 102, 153, 0.4); width: 50px; } .main_screen{ margin-top: 30px; margin-left: 5px; height: 100%; } .title_text{ margin-bottom: 25px; font-weight: bold; font-size: 16px; color: #003366; } .buttons{ float: right; } .btn.btn_left_arrow{ background-color: white; margin-left: 5px; } .btn.btn_number{ color: #007eb6; font-weight: bold; font-size: 12px; background-color: white; margin-right: -10px; margin-left: -10px; } .btn.btn_right_arrow{ background-color: white; margin-right: 5px; } .table_area{ float: left; } .table.table_cust{ min-width: 970px; /*width: 970px;*/ } .table_row{ height: 42px; font-size: 12px; } .table_heading{ font-weight: bold; font-size: 14px; color: #333333; } .btn-xs.sort_icon{ background-color: white; /*fall back colour*/ /*background-color: inherit;*/ } .glyphicon-sort.sort_icon{ font-size: 8px; } /*.btn.table_button{ width: 60px; height: 21px; z-index: 3; color: white; font-weight: bold; vertical-align: left; }*/ .btn-xs.side_arrow{ background-color: inherit; } .btn-xs.failed_red{ background-color: #cc0000; } .btn-xs.failed_orange{ background-color: #f27e18; } .btn-xs.failed_yellow{ background-color: #ecb906; } .btn-xs.passed_dgreen{ background-color: #248624; } .btn-xs.passed_mgreen{ background-color: #71ac2c; } .btn-xs.passed_lgreen{ background-color: ; } /*Modal Dialog CSS*/ .modal-dialog.approval_dialog{ width: 550px; min-height: 300px; } .approval_modal_header_text{ font-weight: bold; font-size: 26px; color: #003366; } .approval_close { float: right; margin-right: 5px; margin-top: 5px; } .approval_accept_reject{ font-family: "HelveticaNeue-Bold", "Helvetica Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 22px; color: #FFFFFF; } .form-control.approval_comment{ margin: 9px; width: 522px; min-height: 177px; border-style: solid; border-width: 1px; border-color: rgba(0, 102, 153, 0.4); border-radius: 4px; } /* Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0 Version: 1.5.2 Author: KeenThemes Website: http://www.keenthemes.com/ Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keentheme */ /********************* GENERAL UI COLORS *********************/ /*** Colors blue: #4b8df8 light blue: #BFDFF5 red: #e02222 yellow: #ffb848 green: #35aa47 purple: #852b99 dark: #555555; light grey: #fafafa; bblue: #0099ff; ***/ /********************* GENERAL RESET & SETUP *********************/ /*** Import fonts ***/ /*Load Open Sans Font from google fonts*/ /* @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); */ /* load Open Sans Font from local */ @import url(../fonts/font.css); /*** Reset and overrides ***/ /* general body settings */ body { color: #000; font-family: 'Helvetica', sans-serif; padding: 0px !important; margin: 0px !important; font-size:13px; direction: ltr; } .text-binfo { color: #144c85 !important; } .btn-binfo { color: #428BCA !important; background-color: transparent !important; border: solid #428BCA 1px; } .btn-binfo:hover { color: #144c85 !important; background-color: transparent !important; border: solid #144c85 1px; } .btncleardate { position: absolute; right: 50px; top: 9px; bottom: 0; height: 14px; margin: auto; cursor: pointer; color: #666; } .btnclear { position: absolute; right: 5px; top: 0px; bottom: 0; height: 14px; margin: auto; cursor: pointer; color: #666 !important; } tfoot input.search_init { color: #aaa !important; } .search_init { color: #aaa !important; } .btn-xs.failed_red{ background-color: #cc0000; } .btn-xs.failed_orange{ background-color: #f27e18; } .btn-xs.failed_yellow{ background-color: #ecb906; } .btn-xs.passed_dgreen{ background-color: #248624; } .btn-xs.passed_mgreen{ background-color: #71ac2c; } .btn-hr { display: inline-block; width: 100%; min-height: 13px; background: url(../barclays_imgs/drop_shadow.png) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; } .dataTables_wrapper { width: 100%; height: 100%; margin: 0; padding: 0; } /* Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix. */ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /* Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */ @-ms-viewport { width: auto !important; } /* Fix Google Maps canvas * * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's * global `box-sizing` changes. You may optionally need to reset the `max-width` * on images in case you've applied that anywhere else. (That shouldn't be as * necessary with Bootstrap 3 though as that behavior is relegated to the * `.img-responsive` class.) */ .google-map-canvas, .google-map-canvas * { .box-sizing(content-box); } /* Optional responsive image override */ img { max-width1: none; } /*** General typography ***/ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #444; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', sans-serif; font-weight: 300 !important; } h1.block, h2.block, h3.block, h4.block, h5.block, h6.block { padding-top: 10px; padding-bottom: 10px; } a { text-shadow: none !important; color: #0d638f; } /*** Fix link outlines after click ***/ a,a:focus, a:hover, a:active { outline: 0; } /*** General backgrounds. Can be applied to any block or panel ***/ .bg-blue { background-image: none !important; background-color: #4b8df8 !important; border-color:#4b8df8 !important; color: #fff !important; } .bg-lblue { background-image: none !important; background-color: #BFDFF5 !important; border-color:#BFDFF5 !important; color: #000 !important; } .bg-red { background-image: none !important; background-color: #e02222 !important; border-color: #e02222 !important; color: #fff !important; } .bg-yellow { background-image: none !important; background-color: #ffb848 !important; border-color: #ffb848 !important; color: #fff !important; } .bg-green { background-image: none !important; background-color: #35aa47 !important; border-color: #35aa47 !important; color: #fff !important; } .bg-purple { background-image: none !important; background-color: #852b99 !important; border-color: #852b99 !important; color: #fff !important; } .bg-dark { background-image: none !important; background-color: #555555 !important; border-color: #555555 !important; color: #fff !important; } .be-grey { background-image: none !important; background-color: #fafafa !important; border-color: #fafafa !important; } /*** Font Awesome Icons ***/ [class^="icon-"], [class*=" icon-"] { display: inline-block; margin-top: 1px; font-size: 14px; *margin-right: .3em; line-height: 14px; } /*** Make font awesome icons fixed width(latest version issue) ***/ li [class^="icon-"], li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; } li [class^="icon-"].icon-large, li [class*=" icon-"].icon-large { /* increased font size for icon-large */ width: 1.5625em; } /*** Close icon used for modal dialog and other UI element close buttons ***/ .close { display: inline-block; margin-top: 0px; margin-right: 0px; width: 9px; height: 9px; background-repeat: no-repeat !important; background-image: url("../img/remove-icon-small.png") !important; } /*** General HR ***/ hr { margin: 20px 0; border: 0; border-top: 1px solid #E0DFDF; border-bottom: 1px solid #FEFEFE; } /*** Tools ***/ .display-none, .display-hide { display: none; } .no-space { margin: 0px !important; padding: 0px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-bottom-15 { margin-bottom: 15px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-bottom-25 { margin-bottom: 25px !important; } .margin-right-10 { margin-right: 10px !important; } .bold { font-weight:600 !important; } .fix-margin { margin-left: 0px !important } .border { border: 1px solid red; } .inline { display: inline; } /*** ie8 & ie9 modes ***/ .visible-ie8 { display: none; } .ie8 .visible-ie8 { display: inherit !important; } .visible-ie9 { display: none; } .ie9 .visible-ie9 { display: inherit !important; } .hidden-ie8 { display: inherit; } .ie8 .hidden-ie8 { display: none !important; } .hidden-ie9 { display: inherit; } .ie9 .hidden-ie9 { display: none !important; } /******************** GENERAL LAYOUT *********************/ /*** Header and header elements. ***/ .header { width: 100%; padding: 0 20px 0 20px; margin: 0; border: 0px; padding: 0px; box-shadow: none; height: 55px; min-height: 55px; background: url(../barclays_imgs/header_bg_prt01.png) repeat; } .header.navbar-fixed-top { z-index: 9995 !important; } .header2 { background: url(../barclays_imgs/header_bg_prt02.png) repeat; box-shadow: none; left: 0px; height: 80px; z-index: 5; width: 100%; } .header .navbar-brand { display: inline-block; margin-top: -8px; margin-right: 0; padding-left: 0; padding-right: 8px; width: auto; } .header .navbar-brand img { margin-left: 0px; } .header .navbar-toggle { margin: 8px 6px 4px 6px; padding: 0; padding-top:2px; padding-bottom: 6px; background-image: none; filter:none; box-shadow: none; color: #fff; border: 0; } .header .navbar-toggle:hover { text-decoration: none; background: none; } .header .navbar-nav { margin-right: 20px; display: block; } .header .navbar-nav > li { margin: 0px; padding: 0px; } .header .navbar-nav > li.dropdown, .header .navbar-nav > li.dropdown > a { padding-left: 4px; padding-right: 4px; } .header .navbar-nav > li.dropdown > a:last-child { padding-right: 0; } .header .navbar-nav > li.dropdown:last-child { padding-right: 2px; } .header .navbar-nav > li.dropdown .dropdown-toggle { margin: 0px; padding: 15px 10px 7px 10px; } .header .navbar-nav > li.dropdown .dropdown-toggle > i { font-size: 18px; } .header .navbar-nav > li.dropdown .dropdown-menu > li > a > i { font-size: 14px; } .header .navbar-nav > li.dropdown.user .dropdown-toggle { padding: 7px 4px 6px 9px; } .header .navbar-nav > li.dropdown.user .dropdown-toggle:hover { text-decoration: none; } .header .navbar-nav > li.dropdown.user .dropdown-toggle .username { color: #ddd; } .header .navbar-nav li.dropdown.user .dropdown-toggle i { display: inline-block; margin-top: 5px; margin: 0; font-size: 16px; } .header .navbar-nav > li.dropdown.user .dropdown-menu i { width: 15px; display: inline-block; } .header .navbar-nav > li.dropdown .dropdown-toggle .badge { position: absolute; top: 8px; right: 20px; } /* language bar */ .header .navbar-nav > li.dropdown.language { padding-left: 0; padding-right: 0; margin: 0; } .header .navbar-nav > li.dropdown.language > a { color: #ddd; font-size: 13px; padding: 10px 1px 12px 5px; } .header .navbar-nav > li.dropdown.language > a > img { margin-bottom: 2px; } .header .navbar-nav > li.dropdown.language > a > i { font-size: 16px; } .header .navbar-nav > li.dropdown.language > .dropdown-menu > li > a > img { margin-bottom: 2px; } .header .navbar-nav .dropdown-menu { margin-top: 3px; } /*** Page container ***/ .page-container { margin: 0px; padding: 0px; } .page-header-fixed .page-container { margin-top: 70px; } /*** Page sidebar ***/ /* ie8 fixes */ .ie8 .page-sidebar { position: absolute; width: 255px; } .page-sidebar.navbar-collapse { padding: 0; } .page-sidebar-menu { list-style: none; margin: 0; padding: 0; margin: 0; padding: 0; } .page-sidebar-menu > li { display: block; margin: 0; padding: 0; border: 0px; } .page-sidebar-menu > li.start > a { border-top-color: transparent !important; } .page-sidebar-menu > li:last-child > a, .page-sidebar-menu > li.last > a { border-bottom-color: transparent !important; } .page-sidebar-menu > li > a { display: block; position: relative; margin: 0; border: 0px; padding: 10px 15px; text-decoration: none; font-size: 14px; font-weight: 300; } .page-sidebar-fixed .page-sidebar-menu > li > a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .page-sidebar-menu > li > a i { font-size: 16px; margin-right: 5px; text-shadow:none; } .page-sidebar-menu > li.break { margin-bottom: 20px; } .page-sidebar-menu > li.active > a { border: none; text-shadow:none; } .page-sidebar-menu > li.active > a .selected { display: block; width: 8px; height: 25px; background-image: url("../img/sidebar-menu-arrow.png"); float: right; position: absolute; right:0px; top:8px; } .page-sidebar ul > li > a > .arrow:before { float: right; margin-top: 0px; margin-right: 5px; display: inline; font-size: 16px; font-family: FontAwesome; height: auto; content: "\f104"; font-weight: 300; text-shadow:none; } .page-sidebar-menu > li > a > .arrow.open:before { float: right; margin-top: 0px; margin-right: 3px; display: inline; font-family: FontAwesome; height: auto; font-size: 16px; content: "\f107"; font-weight: 300; text-shadow:none; } /* bagin: sidebar menu badges */ .page-sidebar-menu li > a > .badge { float: right; margin-top: 1px; margin-right: 13px; } /* end: sidebar menu badges */ .page-sidebar-menu .sub-menu { padding: 0; } .page-sidebar-menu > li > ul.sub-menu { display: none; list-style: none; clear: both; margin: 8px 0px 8px 0px; } .page-sidebar-menu > li.active > ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu > li { background: none; margin: 0px; padding: 0px; margin-top: 1px !important; } .page-sidebar-menu > li > ul.sub-menu > li > a { display: block; margin: 0px 0px 0px 0px; padding: 5px 0px; padding-left: 44px !important; text-decoration: none; font-size: 14px; font-weight: 300; background: none; } /* 3rd level sub menu */ .page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu { display: none; list-style: none; clear: both; margin: 0px 0px 0px 0px; } .page-sidebar-menu > li > ul.sub-menu li > a > .arrow:before { float: right; margin-top: 1px; margin-right: 20px; display: inline; font-size: 16px; font-family: FontAwesome; height: auto; content: "\f104"; font-weight: 300; text-shadow:none; } .page-sidebar-menu > li > ul.sub-menu li > a > .arrow.open:before { float: right; margin-top: 1px; margin-right: 18px; display: inline; font-family: FontAwesome; height: auto; font-size: 16px; content: "\f107"; font-weight: 300; text-shadow:none; } .page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu li { background: none; margin: 0px; padding: 0px; margin-top: 1px !important; } .page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a { display: block; margin: 0px 0px 0px 0px; padding: 5px 0px; text-decoration: none; font-size: 14px; font-weight: 300; background: none; } .page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { padding-left: 60px; } .page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a { padding-left: 80px; } .page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu { display: block; } .page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a > i { font-size: 13px; } /* sidebar search */ .page-sidebar .sidebar-search { padding:0; margin: 0; } .page-sidebar .sidebar-search .form-container { margin: 15px 20px 15px 20px; height: 35px; padding-top: 7px; } .page-sidebar .sidebar-search .form-container .submit { display: block; float: right; margin-top: 3px; width: 13px; height: 15px; background-repeat: no-repeat; box-shadow: none; border: 0px; padding: 0px; outline: none !important; } .page-sidebar .sidebar-search .form-container input[type="text"] { margin: 0px; width: 165px; border: 0px; padding: 0 !important; font-size: 14px !important; box-shadow: none !important; font-size: 14px; font-weight: normal; } .page-sidebar .sidebar-search .form-container input[type="text"]:focus { outline: none !important; } /*** Sidebar toggler(show/hide) ***/ .page-sidebar .sidebar-toggler { cursor: pointer; opacity: 0.5; filter: alpha(opacity=50); margin-top: 15px; margin-left: 175px; width: 29px; height: 29px; background-repeat: no-repeat; } .sidebar-toggler:hover { filter: alpha(opacity=100); opacity: 1; } .page-sidebar-closed .sidebar-toggler { margin-left: 3px; } .page-sidebar-closed .page-sidebar .sidebar-search .form-container { width: 29px; margin-left: 3px; } .page-sidebar-closed .page-sidebar .sidebar-search .form-container .input-box { border-bottom: 0 !important; } .page-sidebar-closed .page-sidebar .sidebar-search .form-container input[type="text"] { display: none; } .page-sidebar-closed .page-sidebar .sidebar-search .form-container .submit { margin-top: 5px !important; margin-left: 7px !important; margin-right: 7px !important; display: block !important; } .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container { width: 255px; position: relative; z-index: 1; padding-top: 0px; } .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container input[type="text"] { margin-top: 7px; margin-left: 8px; padding-left: 10px; padding-bottom: 2px; width: 185px; display: inline-block !important; } .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .submit { display: inline-block; width: 13px; height: 13px; margin: 11px 8px 9px 6px !important; } .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove { background-repeat: no-repeat; width: 11px; height: 11px; margin: 12px 8px 9px 8px !important; display: inline-block !important; float: left !important; } .page-sidebar-closed .page-sidebar-menu > li > a .selected { right: -3px !important; } .page-sidebar-closed .page-sidebar-menu > li > a > .title, .page-sidebar-closed .page-sidebar-menu > li > a > .arrow { display: none !important; } .page-sidebar-closed .sidebar-toggler { margin-right: 3px; } .page-sidebar-closed .page-sidebar .sidebar-search { margin-top: 6px; margin-bottom: 6px; } .page-sidebar-closed .page-sidebar-menu { width: 35px !important; } .page-sidebar-closed .page-sidebar-menu > li > a { padding-left: 7px; } .page-sidebar-fixed.page-sidebar-closed .page-sidebar-menu > li > a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .page-sidebar-closed .page-sidebar-menu > li:hover { width: 236px !important; position: relative !important; z-index: 2000; display: block !important; } .page-sidebar-closed .page-sidebar-menu > li:hover .selected { display: none; } .page-sidebar-closed .page-sidebar-menu > li:hover > a > i { margin-right: 10px; } .page-sidebar-closed .page-sidebar-menu > li:hover .title { display: inline !important; } .page-sidebar-closed .page-sidebar-menu > li > .sub-menu { display: none !important; } .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu { width: 200px; position: absolute; z-index: 2000; left: 36px; margin-top: 0; top: 100%; display: block !important; } .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu, .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > .sub-menu > li > .sub-menu { width: 200px; } /* 2rd level sub menu*/ .page-sidebar-closed .page-sidebar-menu > li:hover > .sub-menu > li > a { padding-left: 15px !important; } /* 3rd level sub menu*/ .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > a { padding-left: 30px !important; } /* 4rd level sub menu*/ .page-sidebar-closed .page-sidebar-menu > li > ul.sub-menu > li > .sub-menu > li > .sub-menu > li > a { padding-left: 45px !important; } /* sidebar container */ .page-sidebar-closed .page-sidebar { width: 35px; } .page-sidebar-closed .page-content { margin-left: 35px !important; } /*** Page content ***/ .page-content { margin-top: 0px; padding: 0px; background-color: #fff; } .ie8 .page-content { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; padding-top: 10px; margin-left: 255px; margin-top: 0px; min-height: 600px; } .ie8 .page-sidebar-fixed .page-content { min-height: 600px; } .ie8 .page-content.no-min-height { min-height: auto; } .page-full-width .page-content { margin-left: 0px !important; } /*** Page title ***/ .page-title { padding: 0px; font-size: 30px; letter-spacing: -1px; display: block; color: #666; margin: 0px 0px 15px 0px; font-weight: 300; font-family: 'Helvetica', sans-serif; } .page-title small { font-size: 14px; letter-spacing: 0px; font-weight: 300; color: #888; } /*** Page breadcrumb ***/ .ie8 .row .page-breadcrumb.breadcrumb > li { margin-right: 1px; } .page-content .page-breadcrumb.breadcrumb { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; box-shadow: none; padding-right: 30px; padding-left: 8px; margin-top: 15px; margin-bottom: 25px; border:0px !important; background-color: #eee; } .page-content .page-breadcrumb.breadcrumb > li > a, .page-content .page-breadcrumb.breadcrumb > li > i, .page-content .page-breadcrumb.breadcrumb > li > span { color: #333; font-size: 14px; text-shadow:none; } .page-content .page-breadcrumb.breadcrumb > li > i { color: #666; } .page-content .page-breadcrumb.breadcrumb > li+li:before { display: none; } /* Dashboard breadcrumb Dropdown */ .page-content .page-breadcrumb.breadcrumb .btn-group { right: 15px; position: absolute; margin-top: -8px; } .page-content .page-breadcrumb.breadcrumb > .btn-group .btn { padding-top: 8px; padding-bottom: 8px; } /* Dashboard date range panel */ .page-content .page-breadcrumb.breadcrumb .dashboard-date-range { position: relative; top: -8px; margin-right: -30px; display: none; padding: 9px 9px 8px 9px; cursor: pointer; color: #fff; background-color: #e02222; } /* hack for chrome and safari */ @media all and (-webkit-min-device-pixel-ratio:0) { .page-content .page-breadcrumb.breadcrumb .dashboard-date-range { padding: 9px; } } .page-content .page-breadcrumb.breadcrumb .dashboard-date-range > span { font-size: 12px; font-weight: 300; color: #fff; text-transform: uppercase; } .page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .icon-calendar { text-transform: normal; color: #fff; margin-top: 0px; font-size: 14px; } .page-content .page-breadcrumb.breadcrumb .dashboard-date-range > .icon-angle-down { color:#fff; font-size: 16px; } /*** Footer ***/ .footer { padding: 8px 20px 5px 20px; font-size: 12px; } .footer:after, .footer:before { content: ""; display: table; line-height: 0; } .footer:after { clear: both; } .footer .footer-inner { float: left; display: inline-block; } .footer .footer-tools { float: right; display: inline-block; } .footer .footer-tools .go-top { display: block; text-decoration: none; cursor: pointer; margin-top: -2px; margin-right: 0px; margin-bottom: 0px; font-size: 16px; padding: 0px 6px 0px 6px; } .footer .footer-tools .go-top i { font-size: 22px; margin-bottom: 5px; } /******************** GENERAL UI ELEMENTS *********************/ /*** Icon stuff ***/ i.icon, a.icon { color: #999; margin-right: 5px; font-weight: normal; font-size: 13px; } i.icon-black { color: #000 !important; } a.icon:hover { text-decoration: none; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; opacity: .4; filter:alpha(opacity=40); } a.icon.huge i{ font-size: 16px !important; } i.big { font-size: 20px; } i.warning { color: #d12610; } i.critical { color: #37b7f3; } i.normal { color: #52e136; } /*** Custom wells ***/ .well { background-color: #fafafa; border: 1px solid #eee; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .well.mini { padding: 7px !important; } /*** Form stuff ***/ /*** Bordered form layout ***/ /*** Input icons ***/ /* input with right aligned and colored icons */ /* input with left aligned icons */ .input-icon { position: relative; } .input-icon input { padding-left: 33px !important; } .input-icon i { color: #ccc; display: block; position: absolute; margin: 11px 2px 4px 10px; width: 16px; height: 16px; font-size: 16px; text-align: center; } .input-icon.right input { padding-left: 12px !important; padding-right: 33px !important; } .input-icon.right i { right: 8px; float: right; } .has-success .input-icon > i { color: #468847; } .has-warning .input-icon > i { color: #c09853; } .has-error .input-icon > i { color: #b94a48; } /*** Portlets ***/ .portlet { clear: both; margin-top: 0px; margin-bottom: 25px; padding: 0px; } .portlet > .portlet-title { margin-bottom: 15px; border-bottom: 1px solid #eee; } .portlet > .portlet-title:after, .portlet > .portlet-title:before { content: ""; display: table; line-height: 0; } .portlet > .portlet-title:after { clear: both; } .portlet > .portlet-title > .caption { float: left; display: inline-block; font-size: 18px; line-height: 18px; font-weight: 400; margin: 0; padding: 0; margin-bottom: 8px; } .portlet > .portlet-title > .caption > i { float: left; margin-top: 4px; display: inline-block !important; font-size: 13px; margin-right: 5px; color: #666; } .portlet.blue > .portlet-title > .caption, .portlet-title.blue > .caption, .portlet.bblue > .portlet-title > .caption, .portlet-title.bblue > .caption, .portlet.green > .portlet-title > .caption, .portlet-title.green > .caption, .portlet.yellow > .portlet-title > .caption, .portlet-title.yellow > .caption, .portlet.red > .portlet-title > .caption, .portlet-title.red > .caption, .portlet.purple > .portlet-title > .caption, .portlet-title.purple > .caption, .portlet.grey > .portlet-title > .caption, .portlet-title.dark-grey > .caption { color: #fff; } .portlet.box.blue > .portlet-title > .caption > i, .portlet.box.bblue > .portlet-title > .caption > i, .portlet.box.green > .portlet-title > .caption > i, .portlet.box.grey > .portlet-title > .caption > i, .portlet.box.yellow > .portlet-title > .caption > i, .portlet.box.red > .portlet-title > .caption > i, .portlet.box.purple > .portlet-title > .caption > i, .portlet.box.light-grey > .portlet-title > .caption > i{ color: #fff; } .sortable .portlet > .portlet-title { cursor: move; } .portlet > .portlet-title > .tools, .portlet > .portlet-title > .actions { display: inline-block; padding: 0; margin: 0; margin-top: 6px; float: right; } .portlet > .portlet-title > .tools > a { display: inline-block; height: 16px; margin-left:5px; } .portlet > .portlet-title > .actions > .dropdown-menu i { color: #000 !important; } .portlet > .portlet-title > .tools > a.remove { margin-bottom: 2px; background-image:url(../img/portlet-remove-icon.png); background-repeat: no-repeat; width: 11px; } .portlet > .portlet-title > .tools > a.config { margin-bottom: 2px; background-image:url(../img/portlet-config-icon.png); background-repeat: no-repeat; width: 12px; } .portlet > .portlet-title > .tools > a.reload { margin-bottom: 2px; background-image:url(../img/portlet-reload-icon.png); width: 13px; } .portlet > .portlet-title > .tools > a.expand { margin-bottom: 2px; background-image:url(../img/portlet-expand-icon.png); width: 14px; } .portlet > .portlet-title > .tools > a.collapse { margin-bottom: 2px; background-image:url(../img/portlet-collapse-icon.png); width: 14px; } .portlet > .portlet-title > .tools > a:hover { text-decoration: none; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; opacity:.6; filter:'alpha(opacity=60)'; } .portlet > .portlet-title > .actions > .btn-group { margin-top: -12px; } .portlet > .portlet-title > .actions > .btn { padding: 4px 10px; margin-top: -14px; } .portlet > .portlet-title > .actions > .btn-group > .btn { padding: 4px 10px; margin-top: -1px; } .portlet > .portlet-title > .actions > .btn.btn-sm { padding: 3px 8px; margin-top: -14px; } .portlet > .portlet-title > .actions > .btn-group > .btn-sm { padding: 3px 8px; margin-top: -1px; } .portlet > .portlet-title > .pagination.pagination-sm { float: right !important; display: inline-block !important; margin: 0px; margin-top: -4px; } .portlet > .portlet-body { clear: both; padding: 0; } .portlet > .portlet-body.light-blue, .portlet.light-blue { background-color: #BFDFF5 !important; } .portlet > .portlet-body.blue, .portlet.blue { background-color: #4b8df8 !important; } .portlet > .portlet-body.bblue, .portlet.bblue { background-color: #0099ff !important; } .portlet > .portlet-body.red, .portlet.red { background-color: #e02222 !important; } .portlet > .portlet-body.yellow, .portlet.yellow { background-color: #ffb848 !important; } .portlet > .portlet-body.green, .portlet.green { background-color: #35aa47 !important; } .portlet > .portlet-body.purple, .portlet.purple { background-color: #852b99 !important; } .portlet > .portlet-body.light-grey, .portlet.light-grey { background-color: #fafafa !important; } .portlet > .portlet-body.grey, .portlet.grey { background-color: #555555 !important; } /* draggable girds */ .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 100% !important; } .ui-sortable-placeholder * { visibility: hidden; } .sortable-box-placeholder { background-color: #f5f5f5; border: 1px dashed #DDDDDD; display: block; /* float: left;*/ margin-top: 0px !important; margin-bottom: 24px !important; } .sortable-box-placeholder * { visibility:hidden; } /*** Solid colored portlet ***/ .portlet.solid { padding: 10px; } .portlet.solid > .portlet-title > .tools { margin-top: 2px; border: 0px; } .portlet.solid > .portlet-title { margin-bottom: 5px; border: 0px; } .portlet.solid.bordered > .portlet-title { margin-bottom: 15px; } .portlet.solid.red > .portlet-title, .portlet.solid.red > .portlet-title > .caption > i, .portlet.solid.red > .portlet-body, .portlet.solid.green > .portlet-title, .portlet.solid.green > .portlet-title > .caption > i, .portlet.solid.green > .portlet-body, .portlet.solid.yellow > .portlet-title, .portlet.solid.yellow > .portlet-title > .caption > i, .portlet.solid.yellow > .portlet-body, .portlet.solid.grey > .portlet-title, .portlet.solid.grey > .portlet-title > .caption > i, .portlet.solid.grey > .portlet-body, .portlet.solid.purple > .portlet-title, .portlet.solid.purple > .portlet-title > .caption > i, .portlet.solid.purple > .portlet-body, .portlet.solid.bblue > .portlet-title, .portlet.solid.bblue > .portlet-title > .caption > i, .portlet.solid.bblue > .portlet-body, .portlet.solid.blue > .portlet-title, .portlet.solid.blue > .portlet-title > .caption > i, .portlet.solid.blue > .portlet-body { border: 0; color: #fff; } .portlet.bordered { border-left: 2px solid #ddd; } /*** Box portlet ***/ .portlet.box { padding:0px !important } .portlet.box > .portlet-title { padding:8px 10px 2px 10px; border-bottom: 1px solid #eee; color: #fff !important; } .portlet.box > .portlet-title > .actions > .btn > i { color: #fff !important; } .portlet.box > .portlet-title > .tools { margin-top: 3px; } .portlet.box > .portlet-title > .tools > a.remove, .portlet.solid > .portlet-title > .tools > a.remove { background-image:url(../img/portlet-remove-icon-white.png); } .portlet.box > .portlet-title > .tools > a.config, .portlet.solid > .portlet-title > .tools > a.config { background-image:url(../img/portlet-config-icon-white.png); } .portlet.box > .portlet-title > .tools > a.reload, .portlet.solid > .portlet-title > .tools > a.reload { background-image:url(../img/portlet-reload-icon-white.png); } .portlet.box > .portlet-title > .tools > a.expand, .portlet.solid > .portlet-title > .tools > a.expand { background-image:url(../img/portlet-expand-icon-white.png); } .portlet.box > .portlet-title > .tools > a.collapse, .portlet.solid > .portlet-title > .tools > a.collapse { background-image:url(../img/portlet-collapse-icon-white.png); } /* portlet buttons */ .portlet.box > .portlet-body { background-color: #fff; padding: 10px; } .portlet.box > .portlet-title { margin-bottom: 0px; } .portlet.box.blue > .portlet-title { background-color: #4b8df8; } .portlet.box.bblue > .portlet-title { background-color: #0099ff; } .portlet.box.blue { border: 1px solid #b4cef8; border-top: 0; } .portlet.box.bblue { border: 1px solid #b4cef8; border-top: 0; } .portlet.box.red > .portlet-title { background-color: #e02222; } .portlet.box.red { border: 1px solid #ef8476; border-top: 0; } .portlet.box.yellow > .portlet-title { background-color: #ffb848; } .portlet.box.yellow { border: 1px solid #fccb7e; border-top: 0; } .portlet.box.green > .portlet-title { background-color: #35aa47; } .portlet.box.green { border: 1px solid #77e588; border-top: 0; } .portlet.box.purple > .portlet-title { background-color: #852b99; } .portlet.box.purple { border: 1px solid #af5cc1; border-top: 0; } .portlet.box.grey > .portlet-title { background-color: #555555; } .portlet.box.grey { border: 1px solid #9d9c9c; border-top: 0; } .portlet.box.light-grey > .portlet-title { background-color: #aaa; } .portlet.box.light-grey { border: 1px solid #bbb; border-top: 0; } /*** Charts and statistics ***/ .chart, .pie, .bars { overflow: hidden; height: 300px; } /*** Statistic lists ***/ .item-list.table .percent { width: 30px; float: right; margin-right: 10px; margin-top: 3px; } .item-list.table .title { padding-top: -5px; } /*** Chart tooltips ***/ .chart-tooltip { clear: both; z-index: 100; background-color: #736e6e !important; padding: 5px !important; color: #fff; } .chart-tooltip .label { clear: both; display: block; margin-bottom: 2px; } /*** Mini chart containers ***/ .bar-chart { display: none } .line-chart { display: none } /*** Custom icon buttons ***/ .icon-btn { height: 60px; min-width: 80px; margin: 5px 5px 0 0; border: 1px solid #ddd; padding: 12px 0px 0px 0px; background-color: #fafafa !important; background-image: none !important; filter:none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; display:inline-block !important; color: #646464 !important; text-shadow: none !important; text-align: center; cursor: pointer; position: relative; -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; } .icon-btn i { font-size: 18px; } .ie8 .icon-btn:hover { filter: none !important; } .icon-btn:hover { text-decoration: none !important; border-color: #999 !important; color: #444 !important; text-shadow: 0 1px 0px rgba(255, 255, 255, 1) !important; -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .icon-btn:hover .badge { -webkit-transition: all 0.3s ease !important; -moz-transition: all 0.3s ease !important; -ms-transition: all 0.3s ease !important; -o-transition: all 0.3s ease !important; transition: all 0.3s ease !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .icon-btn div { font-family: 'Helvetica', sans-serif; margin-top: 5px; margin-bottom: 20px; color: #000; font-size: 12px; font-weight: 300; } .icon-btn .badge { position: absolute; font-family: 'Helvetica', sans-serif; font-size: 11px !important; font-weight: 300; top: -5px; right: -5px; padding: 3px 6px 3px 6px; color: white !important; text-shadow: none; border-width: 0; border-style: solid; -webkit-border-radius: 12px !important; -moz-border-radius: 12px !important; border-radius: 12px !important; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* extended dropdowns */ .dropdown-menu.extended { min-width: 160px !important; max-width: 300px !important; width: 233px !important; background-color: #ffffff !important; } .dropdown-menu.extended:before, .dropdown-menu.extended:after { border-bottom-color: #ddd !important; } .dropdown-menu.extended li a{ display: block; padding: 5px 10px !important; clear: both; font-weight: normal; line-height: 20px; white-space: normal !important; } .dropdown-menu.extended li i{ margin-right: 3px; } .dropdown-menu.extended li a{ font-size: 13px; padding: 10px !important; background-color: #ffffff; } .dropdown-menu.extended li a:hover { background-image: none; background-color: #f5f5f5; color: #000; filter:none; } .dropdown-menu.extended li p{ padding: 10px; background-color: #eee; margin: 0px; font-size: 14px; font-weight: 300; color: #000; } .dropdown-menu.extended li a{ padding: 7px 0 5px 0px; list-style: none; border-bottom: 1px solid #f4f4f4 !important; font-size: 12px; text-shadow: none; } .dropdown-menu.extended li:first-child a { border-top: none; border-bottom: 1px solid #f4f4f4 !important; } .dropdown-menu.extended li:last-child a { border-top: 1px solid white !important; border-bottom: 1px solid #f4f4f4 !important; } .dropdown-menu.extended li.external > a { font-size: 13px; font-weight: 400; } .dropdown-menu.extended li.external > a > i{ margin-top: 3px; float: right; } /* header notifications dropdowns */ .dropdown-menu .dropdown-menu-list.scroller { padding-right: 0 !important; padding-left: 0; list-style: none; } .dropdown-menu.notification li > a .time { font-size: 12px; font-weight: 600; text-align: right; font-style: italic; } /* header inbox dropdowns */ .dropdown-menu.inbox li > a .photo { float: left; padding-right: 6px; } .dropdown-menu.inbox li > a .photo > img { height: 40px; width: 40px; } .dropdown-menu.inbox li > a .subject { display: block; } .dropdown-menu.inbox li > a .subject .from { font-size: 14px; font-weight: 400; color: #02689b; } .dropdown-menu.inbox li > a .subject .time { font-size: 12px; font-weight: 600; font-style: italic; position: relative; float: right; } .dropdown-menu.inbox li > a .message { display: block !important; font-size: 12px; } /* header tasks */ .dropdown-menu.tasks .task { margin-bottom: 5px; } .dropdown-menu.tasks .task .desc { font-size: 13px; font-weight: 300; } .dropdown-menu.tasks .task .percent { font-size: 14px; font-weight: 600; font-family: 'Helvetica', sans-serif; float: right; display: inline-block; } .dropdown-menu.tasks .progress { display: block; height: 11px; margin: 0px; } /*** General list for item with image ***/ .item-list li .img { height: 50px; width: 50px; float: left; margin-top: 3px; margin-right: 5px; } .item-list { margin: 0px; list-style: none; } .item-list li { padding: 7px 0 5px 0px; list-style: none; border-top: 1px solid white; border-bottom: 1px solid #EBEBEB; font-size: 12px; } .item-list li:first-child { border-top: none; border-bottom: 1px solid #EBEBEB; } .item-list li:last-child { border-top: none; border-bottom: none; } .item-list li .label { margin-right: 5px; } .item-list.todo li .label { position: absolute; right: 80px; } .item-list.todo li .actions { position: absolute; right: 45px; } /*** Custom tables ***/ .table-toolbar { margin-bottom: 15px; } .table.table-full-width { width: 100% !important; } .table .m-btn { margin-top: 0px; margin-left: 0px; margin-right: 5px; } .table thead tr th { font-size: 14px; font-weight: 600; } .table-advance { margin-bottom: 10px !important; } .table-advance thead { color: #999; } .table-advance thead tr th{ background-color: #DDD; font-size: 14px; font-weight: 400; color: #666; } .table-advance div.success, .table-advance div.info, .table-advance div.important, .table-advance div.warning, .table-advance div.danger { position: absolute; margin-top:-5px; float: left; width: 2px; height: 30px; margin-right: 20px !important; } .table-advance tr td { border-left-width: 0px; } .table-advance tr td:first-child { border-left-width: 1px !important; } .table-advance tr td.highlight:first-child a { margin-left: 15px; } .table-advance td.highlight div.success { border-left: 2px solid #66ee66; } .table-advance td.highlight div.info { border-left: 2px solid #87ceeb; } .table-advance td.highlight div.important { border-left: 2px solid #f02c71; } .table-advance td.highlight div.warning { border-left: 2px solid #fdbb39; } .table-advance td.highlight div.danger { border-left: 2px solid #e23e29; } /*** Star rating ***/ .rating { unicode-bidi: bidi-override; direction: rtl; font-size: 30px; } .rating span.star { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; } .rating span.star:hover { cursor: pointer; } .rating span.star:before { content: "\f006"; padding-right: 5px; color: #999999; } .rating span.star:hover:before, .rating span.star:hover ~ span.star:before { content: "\f005"; color: #e3cf7a; } /*** Item block with details shown on hover ***/ .item { overflow: hidden; display: block; margin-bottom: 20px; } .item .details { width: 100%; display: none; background-color: #000; color: #fff !important; padding: 5px; text-align: center; position: relative; bottom:30px; margin-bottom:-30px; overflow: hidden; z-index: 6; } .item:hover .details { display: block; opacity: 0.7; filter: alpha(opacity = 70); } .item:hover .zoom-icon{ opacity:0.5; filter: alpha(opacity = 50); } /*** Zoom icon overlay on images ***/ .zoom { cursor: pointer; width: 100%; height: 100%; position: relative; z-index: 5; } .zoom .zoom-icon { background-image:url("../img/overlay-icon.png"); background-color: #222; background-repeat: no-repeat; background-position: 50%; position: absolute; width: inherit; height: inherit; opacity: 0; filter: alpha(opacity = 0); z-index: 6; top:0; } /*** Chats ***/ .chats { margin:0; padding: 0; margin-top: -15px; } .chats li { list-style: none; padding: 5px 0; margin: 10px auto; font-size: 12px; } .chats li img.avatar { height: 45px; width: 45px; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .chats li.in img.avatar { float: left; margin-right: 10px; } .chats li .name { color:#3590c1; font-size: 13px; font-weight: 400; } .chats li .datetime { color:#333; font-size: 13px; font-weight: 400; } .chats li.out img.avatar { float: right; margin-left: 10px; } .chats li .message { display: block; padding: 5px; position: relative; } .chats li.in .message { text-align: left; border-left: 2px solid #35aa47; margin-left: 65px; background: #fafafa } .chats li.in .message .arrow { display: block; position: absolute; top: 5px; left: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #35aa47; } .chats li.out .message .arrow { display: block; position: absolute; top: 5px; right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #da4a38; } .chats li.out .message { border-right: 2px solid #da4a38; margin-right: 65px; background: #fafafa; text-align: right; } .chats li.out .name, .chats li.out .datetime { text-align: right; } .chats li .message .body { display: block; } .chat-form { margin-top: 15px; padding: 10px; background-color: #e9eff3; overflow: hidden; clear: both; } .chat-form .input-cont { margin-right: 40px; } .chat-form .input-cont .form-control { width: 100% !important; margin-bottom: 0px; } .chat-form .input-cont input{ border: 1px solid #ddd; width: 100% !important; margin-top: 0; } .chat-form .input-cont input { background-color: #fff !important; } .chat-form .input-cont input:focus{ border: 1px solid #4b8df9 !important; } .chat-form .btn-cont { margin-top: -42px; position: relative; float: right; width:44px; } .chat-form .btn-cont .arrow { position: absolute; top: 17px; right: 43px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #4d90fe; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chat-form .btn-cont:hover .arrow { border-right-color: #0362fd; } .chat-form .btn-cont:hover .btn { background-color: #0362fd; } .chat-form .btn-cont .btn { margin-top: 8px; } /*** System feeds ***/ .feeds { margin: 0px; padding: 0px; list-style: none; } .feeds li { background-color: #fafafa; margin-bottom: 7px; } .feeds li:before, .feeds li:after { display: table; line-height: 0; content: ""; } .feeds li:after { clear: both; } .feeds li:last-child { margin-bottom: 0px; } .feeds .col1 { float:left; width:100%; clear: both; } .feeds .col2 { float:left; width:75px; margin-left:-75px; } .feeds .col1 .cont { float:left; margin-right:75px; overflow:hidden; } .feeds .col1 .cont .cont-col1 { float:left; margin-right:-100%; } .feeds .col1 .cont .cont-col1 .label { display: inline-block; padding: 5px 4px 6px 5px; vertical-align: middle; text-align: center; } .feeds .col1 .cont .cont-col1 .label > i { text-align: center; font-size: 14px; } .feeds .col1 .cont .cont-col2 { float:left; width:100%; } .feeds .col1 .cont .cont-col2 .desc { margin-left:35px; padding-top: 4px; padding-bottom: 5px; overflow:hidden; } .feeds .col2 .date { padding: 4px 9px 5px 4px; text-align: right; font-style: italic; color:#c1cbd0; } /*** Users ***/ .user-info { margin-bottom: 10px !important; } .user-info img { float: left; margin-right: 5px; } .user-info .details { display: inline-block; } .user-info .label { font-weight: 300; font-size: 11px; } /*** Accordions ***/ .accordion-heading { background:#eee; } .accordion-heading a { text-decoration:none; } .accordion-heading a:hover { text-decoration:none; } /*** Vertical inline menu ***/ .ver-inline-menu { padding: 0; margin: 0; list-style: none; } .ver-inline-menu li { position:relative; margin-bottom:1px; } .ver-inline-menu li i { width: 37px; height: 37px; display: inline-block; color:#b9cbd5; font-size:15px; padding:12px 10px 10px 8px; margin:0 8px 0 0; text-align: center; background:#e0eaf0 !important; } .ver-inline-menu li a { font-size: 13px; color:#557386; display:block; background:#f0f6fa; border-left:solid 2px #c4d5df; } .ver-inline-menu li:hover a, .ver-inline-menu li:hover i { background:#e0eaf0; text-decoration:none; } .ver-inline-menu li:hover i { color:#fff; background:#c4d5df !important; } .ver-inline-menu li.active a, .ver-inline-menu li:hover a { font-size: 13px; } .ver-inline-menu li.active a { border-left:solid 2px #0c91e5; } .ver-inline-menu li.active a, .ver-inline-menu li.active i { color:#fff; background:#169ef4; text-decoration:none; } .ver-inline-menu li.active i { background:#0c91e5 !important; } .ver-inline-menu li.active:after { content: ''; display: inline-block; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #169ef4; position: absolute; top: 12px; right: -5px; } /*** Custom tabs ***/ .tabbable-custom { margin-bottom: 15px; padding: 0px; overflow: hidden; } .tabbable-custom > .nav-tabs { border: none; margin: 0px; } .tabbable-custom > .tab-content { background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 10px; } .tabbable-custom.nav-justified .tab-content { margin-top: -1px; } .tabs-below.tabbable-custom.nav-justified .tab-content { margin-top: 0px; margin-bottom: -2px; } .tabbable-custom.boxless > .tab-content { padding:15px 0; border-left:none; border-right:none; border-bottom:none; } .tabbable-custom .nav-tabs > li { margin-right: 2px; border-top: 2px solid transparent; } .tabbable-custom .nav-tabs > li > a { margin-right: 0; } .tabbable-custom .nav-tabs > li > a:hover { background: none; border-color:transparent; } .tabbable-custom .nav-tabs > li.active { border-top: 3px solid #d12610; margin-top: 0; position: relative; } .tabbable-custom .nav-tabs > li.active > a { border-top: none; font-weight: 400; } .tabbable-custom .nav-tabs > li.active > a:hover { border-top: none; background: #fff; border-color: #d4d4d4 #d4d4d4 transparent; } .tabbable-custom .nav-tabs > li { margin-right: 2px; border-top: 2px solid transparent; } /* below tabs */ .tabs-below.tabbable-custom .nav-tabs > li > a { border-top: none; border-bottom: 2px solid transparent; margin-top: -1px; } .tabs-below.tabbable-custom .nav-tabs > li.active { border-top: none; border-bottom: 3px solid #d12610; margin-bottom: 0; position: relative; } .tabs-below.tabbable-custom .nav-tabs > li.active > a { border-bottom: none } .tabs-below.tabbable-custom .nav-tabs > li.active > a:hover { background: #fff; border-color: #d4d4d4 #d4d4d4 transparent; } /*full width tabs with bigger titles */ .tabbable-custom.tabbable-full-width > .tab-content { padding:15px 0; border-left:none; border-right:none; border-bottom:none; } .tabbable-custom.tabbable-full-width .nav-tabs > li > a { color:#424242; font-size:15px; padding:9px 15px; } /*** Custom portlet tabs ***/ .portlet-tabs > .nav-tabs { position: relative; top: -41px; margin-right: 10px; overflow: hidden; } .portlet-tabs > .nav-tabs > li { float: right; } .portlet-tabs > .nav-tabs { border-bottom: none; } .portlet-tabs > .nav-tabs > li > a { color: #fff; padding-top: 8px; padding-bottom: 10px; line-height: 16px; margin-top: 6px; margin-left: 0px; margin-right: 0px; border-left: 0; border-right: 0; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .portlet-tabs > .nav-tabs > li:last-child > a { border-right:0; } .portlet-tabs > .nav-tabs > li { margin-left: 1px; } .portlet-tabs > .nav-tabs > li.active { color: #333; border-top-color: transparent; } .portlet-tabs > .nav-tabs > li.active > a { margin-bottom: 0px; border-bottom: 0; margin-left: 0px; margin-right: 0px; border-left: 0; border-right: 0; background-color: none !important; border-top-color:transparent !important; } .portlet-tabs > .nav-tabs > li > a:hover { color: #333; margin-bottom: 0; border-bottom-color: transparent; margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; background-color: none !important; border-top-color:transparent; background-color: #fff; } .portlet-tabs > .nav-tabs > .active > a { color: #555555; cursor: default; background-color: #fff; } .portlet-tabs > .nav-tabs > .active > a:hover { background-color: #fff !important; } .portlet-tabs > .tab-content { padding: 10px !important; margin: 0px; margin-top: -50px !important; } .portlet.tabbable .portlet-body { padding: 0px; } .tab-pane > p:last-child { margin-bottom: 0px; } /*** Dashboard container ***/ #dashboard { overflow: hidden; } /*** Dashboard stats ***/ .dashboard-stat { margin-bottom: 25px; } .dashboard-stat:before, .dashboard-stat:after { display: table; line-height: 0; content: ""; } .dashboard-stat:after { clear: both; } .dashboard-stat .visual { width: 80px; height:80px; display: block; float: left; padding-top: 10px; padding-left: 15px; margin-bottom: 10px; } .dashboard-stat .visual i { font-size: 65px; line-height: 65px; color: #fff; } @media (min-width: 992px) and (max-width: 1024px) { .dashboard-stat .visual i { font-size: 28px; line-height: 28px; } } .dashboard-stat .details { position: absolute; right: 15px; padding-right: 10px; } .dashboard-stat .details .number { padding-top: 15px; text-align: right; font-size: 34px; line-height: 34px; letter-spacing: -1px; margin-bottom: 5px; font-weight: 300; color: #fff; } .dashboard-stat .details .desc { text-align: right; font-size: 16px; letter-spacing: 0px; font-weight: 300; color: #fff; } .dashboard-stat .more { clear: both; display: block; padding: 5px 10px 5px 10px; text-transform: uppercase; font-weight: 300; font-size: 11px; color: #fff; opacity: 0.7; filter: alpha(opacity=70); } .dashboard-stat .more:hover { text-decoration: none; opacity: 1; filter: alpha(opacity=100); } .dashboard-stat .more > i { display: inline-block; margin-top: 1px; float: right; } .dashboard-stat.blue { background-color: #27a9e3; } .dashboard-stat.bblue { background-color: #27a9e3; } .dashboard-stat.blue .more { background-color: #208dbe; } .dashboard-stat.bblue .more { background-color: #208dbe; } .dashboard-stat.green { background-color: #28b779; } .dashboard-stat.green .more { background-color: #10a062; } .dashboard-stat.red { background-color: #e7191b; } .dashboard-stat.red .more { background-color:#bc0d0e; } .dashboard-stat.yellow { background-color: #ffb848; } .dashboard-stat.yellow .more { background-color: #cb871b; } .dashboard-stat.purple { background-color: #852b99; } .dashboard-stat.purple .more { background-color: #6e1881; } /*** Tiles(new in v1.1.1) ***/ .tiles { margin-right: -10px; } .tile { display: block; letter-spacing: 0.02em; float: left; height: 135px; width: 135px !important; cursor: pointer; text-decoration: none; color: #ffffff; position: relative; font-weight: 300; font-size: 12px; letter-spacing: 0.02em; line-height: 20px; font-smooth: always; overflow: hidden; border: 4px solid transparent; margin: 0 10px 10px 0; } .tile:after, .tile:before { content: ""; float: left; } .tile.double { width: 280px !important; } .tile.double-down { height: 280px !important; } .tile:active, .tile.selected { border-color: #ccc !important; } .tile:hover { border-color: #aaa !important; } .tile.selected .corner:after { content: ""; display: inline-block; border-left: 40px solid transparent; border-bottom: 40px solid transparent; border-right: 40px solid #ccc; position: absolute; top: -3px; right: -3px; } .tile.selected .check:after { content: ""; font-family: FontAwesome; font-size: 13px; content: "\f00c"; display: inline-block; position: absolute; top: 2px; right: 2px; } .tile * { color: #ffffff; } .tile .tile-body { height: 100%; vertical-align: top; padding: 10px 10px; overflow: hidden; text-overflow: ellipsis; position: relative; font-weight: 400; font-size: 12px; font-smooth: always; color: #000000; color: #ffffff; margin-bottom: 10px; } .tile .tile-body img { float: left; margin-right: 10px; } .tile .tile-body img.pull-right { float: right !important; margin-left: 10px; margin-right: 0px; } .tile .tile-body .content { display: inline-block; } .tile .tile-body > i { margin-top: 17px; display: block; font-size: 56px; line-height: 56px; text-align: center; } .tile.double-down i { margin-top: 95px; } .tile .tile-body h1, .tile .tile-body h2, .tile .tile-body h3, .tile .tile-body h4, .tile .tile-body h5, .tile .tile-body h6, .tile .tile-body p { padding: 0; margin: 0; line-height: 14px; } .tile .tile-body h3, .tile .tile-body h4 { margin-bottom: 5px; } .tile .tile-body h1:hover, .tile .tile-body h2:hover, .tile .tile-body h3:hover, .tile .tile-body h4:hover, .tile .tile-body h5:hover, .tile .tile-body h6:hover, .tile .tile-body p:hover { color: #ffffff; } .tile .tile-body p { font-weight: 400; font-size: 13px; font-smooth: always; color: #000000; color: #ffffff; line-height: 20px; overflow: hidden; text-overflow: ellipsis; } .tile .tile-body p:hover { color: rgba(0, 0, 0, 0.8); } .tile .tile-body p:active { color: rgba(0, 0, 0, 0.4); } .tile .tile-body p:hover { color: #ffffff; } .tile.icon > .tile-body { padding: 0; } .tile .tile-object { position: absolute; bottom: 0; left: 0; right: 0; min-height: 30px; background-color: transparent; *zoom: 1; } .tile .tile-object:before, .tile .tile-object:after { display: table; content: ""; } .tile .tile-object:after { clear: both; } .tile .tile-object > .name { position: absolute; bottom: 0; left: 0; margin-bottom: 5px; margin-left: 10px; margin-right: 15px; font-weight: 400; font-size: 13px; font-smooth: always; color: #ffffff; } .tile .tile-object > .name > i { vertical-align: middle; display: block; font-size: 24px; height: 18px; width: 24px; } .tile .tile-object > .number { position: absolute; bottom: 0; right: 0; margin-bottom: 0; color: #ffffff; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; line-height: 14px; font-smooth: always; margin-bottom: 8px; margin-right: 10px; } .tile.image { border-color1: transparent !important; } .tile.image > .tile-body { padding: 0 !important; } .tile.image > .tile-body > img{ width: 100%; height: auto; min-height: 100%; max-width: 100%; } .tile.image .tile-body h3 { display: inline-block; } /*** Theme Panel ***/ .theme-panel { width: 320px; margin-top: -20px; margin-right: 1px; z-index: 999; float: right; position:relative; } .theme-panel > .toggler { top:4px; right:0; padding:20px; cursor:pointer; position:absolute; background:#c9c9c9 url(../img/icon-color.png) center no-repeat; } .theme-panel > .toggler:hover { background-color: #3d3d3d !important; } .theme-panel > .toggler-close { display: none; top:4px; right:0; padding:20px; cursor:pointer; position:absolute; background: #3d3d3d url(../img/icon-color-close.png) center no-repeat !important; } .theme-panel > .toggler-close:hover { background-color:#222 !important; } .theme-panel > .theme-options { top:4px; right:40px; display:none; position:absolute; background:#3d3d3d; } .theme-panel > .theme-options > .theme-option { color:#cfcfcf; padding: 15px; border-top:1px solid #585858; margin-top: 0px; margin-bottom: 0px; } .theme-panel > .theme-options > .theme-option.theme-colors { border-top: 0; } .theme-panel > .theme-options > .theme-option > span { text-transform:uppercase; display: inline-block; width: 85px; font-size: 14px; } .theme-panel > .theme-options > .theme-option.theme-colors > span { display: block; width: auto; } .theme-panel > .theme-options > .theme-option > select.form-control { display: inline; width: 100px; text-transform: lowercase; } .theme-panel > .theme-options > .theme-option.theme-colors > ul { list-style:none; padding: 0; display: block; margin-bottom: 1px !important; margin-top: 10px; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li { width:30px; height:30px; margin:0 4px; cursor:pointer; list-style:none; float: left; border:solid 1px #707070; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li:first-child { margin-left: 0; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li:hover, .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.current { border:solid 2px #ebebeb; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-black { background:#333438; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-grey { background:#6d6d6d; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-blue { background:#124f94; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-brown { background:#623f18; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-purple { background:#701584; } .theme-panel > .theme-options > .theme-option.theme-colors > ul > li.color-white { background:#fff; } /*** Top bar menu ***/ /* enable arrow for dropdown menu */ .header .nav > li > .dropdown-menu:before { position: absolute; top: -7px; right: 9px; display: inline-block !important; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .header .nav > li > .dropdown-menu:after { position: absolute; top: -6px; right: 10px; display: inline-block !important; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; content: ''; } /*** Horezantal Menu(new in v1.2) ***/ .header .hor-menu { margin: 0; float: left; } .header .hor-menu ul.nav li a { font-size: 14px; color: #666 !important; font-weight: bold; padding: 11px 18px; } .header .hor-menu ul.nav li a:hover { /*background: #0099ff !important; */ text-decoration:underline; } .header .hor-menu ul.nav li { position: relative; } .header .hor-menu ul.nav li.active > a { background: #fafafa !important; color: #000 !important; font-weight: bold; } .header .hor-menu ul.nav li.active > a:hover { /*background: #0099ff !important; */ text-decoration:underline; } .header .hor-menu ul.nav li.active .selected { left: 50%; bottom:0; position: absolute; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fafafa; display: inline-block; margin: 0; width: 0px; height:0px; margin-left: -7px; margin-bottom:-6px; } .header .hor-menu ul.nav li a:hover, .header .hor-menu ul.nav li a:focus { /*background: #0099ff !important; */ text-decoration:underline; } /*drop-down*/ .header .hor-menu .dropdown-menu { margin-top: 0; border: none; box-shadow: none; background: #fafafa; } .header .hor-menu .dropdown-menu li > a { color: #333; padding: 7px 18px !important; margin-bottom:1px; } .header .hor-menu .dropdown-menu .arrow { display: none; } .header .hor-menu .dropdown-menu li > a:hover, .header .hor-menu .dropdown-menu li:hover > a, .header .hor-menu .dropdown-menu li.active > a { color: #fff; filter:none !important; background: #0066cc !important; } .header .hor-menu .nav > li > .dropdown-menu:after, .header .hor-menu .nav > li > .dropdown-menu:before { border-bottom: none !important; } /*search*/ .header .hor-menu .hor-menu-search-form-toggler { display: inline-block; padding: 12px 22px 12px 22px !important; cursor: pointer; background: url(../img/hor-menu-search.png) no-repeat center; } .header .hor-menu .hor-menu-search-form-toggler:hover { opacity: 0.8; filter: alpha(opacity=80); } .header .hor-menu .hor-menu-search-form-toggler.off { background: #101010 url(../img/hor-menu-search-close.png) no-repeat center; } .header .hor-menu a.hor-menu-search-form-toggler-close { display: none; } .header .hor-menu .search-form { top:42px; right:0px; padding:8px; display:none; z-index:999; position:absolute; background:#101010; } .header .hor-menu .search-form .btn { color: #999; padding: 7px 20px; height: 32px; width: 10px; display: inline-block; background: #2d2d2d url(../img/search-icon.png) no-repeat center; } .header .hor-menu .search-form .btn:hover { opacity: 0.8; filter: alpha(opacity=80); } .header .hor-menu .search-form form { margin-bottom: 0; } .header .hor-menu .search-form form input { background: none; width: 200px; color: #999; border: none; } .header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } .header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } .header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } .header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } /*** Top News Blocks(new in v1.2.2) ***/ .top-news { color: #fff; margin: 8px 0; } .top-news a, .top-news em, .top-news span { display: block; text-align: left; } .top-news a { padding: 10px; position: relative; margin-bottom: 10px; } .top-news a .top-news-icon { right: 8px; bottom: 15px; opacity:0.3; font-size: 35px; position: absolute; filter: alpha(opacity=30); /*For IE8*/ } .top-news em { margin-bottom: 0; font-style: normal; } .top-news span { font-size: 18px; margin-bottom: 5px; } /*** Block Images(new in v1.2.2) ***/ .blog-images { margin-bottom: 0; } .blog-images li { padding: 0; margin: 0; display: inline; } .blog-images li a:hover { text-decoration: none; } .blog-images li img { width: 50px; height: 50px; opacity: 0.6; margin: 0 2px 8px; } .blog-images li img:hover { opacity: 1; box-shadow: 0 0 0 4px #72c02c; transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; } /*Sidebar Tags*/ ul.sidebar-tags a { color: #555; font-size:12px; padding:3px 5px; background:#f7f7f7; margin:0 2px 5px 0; display:inline-block; } ul.sidebar-tags a:hover, ul.sidebar-tags a:hover i { background: #EEE; text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } ul.sidebar-tags a i { color:#777; } ul.sidebar-tags li { padding: 0; } /*** Social Icons(new in v1.2.2) ***/ .social-icons { padding: 0; margin:0; } .social-icons:after, .social-icons:before { content: ""; display: table; } .social-icons:after { clear: both; } .social-icons li { float:left; display:inline; list-style:none; margin-right:5px; margin-bottom:5px; text-indent:-9999px; } .social-icons li a, a.social-icon { width:28px; height:28px; display:block; background-position:0 0; background-repeat:no-repeat; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .social-icons li:hover a { background-position:0 -38px; } .social-icons-color li a { opacity: 0.7; background-position:0 -38px !important; } .social-icons-color li a:hover { opacity: 1; } .social-icons .amazon {background: url(../img/social/amazon.png) no-repeat;} .social-icons .behance {background: url(../img/social/behance.png) no-repeat;} .social-icons .blogger {background: url(../img/social/blogger.png) no-repeat;} .social-icons .deviantart {background: url(../img/social/deviantart.png) no-repeat;} .social-icons .dribbble {background: url(../img/social/dribbble.png) no-repeat;} .social-icons .dropbox {background: url(../img/social/dropbox.png) no-repeat;} .social-icons .evernote {background: url(../img/social/evernote.png) no-repeat;} .social-icons .facebook {background: url(../img/social/facebook.png) no-repeat;} .social-icons .forrst {background: url(../img/social/forrst.png) no-repeat;} .social-icons .github {background: url(../img/social/github.png) no-repeat;} .social-icons .googleplus {background: url(../img/social/googleplus.png) no-repeat;} .social-icons .jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} .social-icons .last-fm {background: url(../img/social/last-fm.png) no-repeat;} .social-icons .linkedin {background: url(../img/social/linkedin.png) no-repeat;} .social-icons .picasa {background: url(../img/social/picasa.png) no-repeat;} .social-icons .pintrest {background: url(../img/social/pintrest.png) no-repeat;} .social-icons .rss {background: url(../img/social/rss.png) no-repeat;} .social-icons .skype {background: url(../img/social/skype.png) no-repeat;} .social-icons .spotify {background: url(../img/social/spotify.png) no-repeat;} .social-icons .stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} .social-icons .tumblr {background: url(../img/social/tumblr.png) no-repeat;} .social-icons .twitter {background: url(../img/social/twitter.png) no-repeat;} .social-icons .vimeo {background: url(../img/social/vimeo.png) no-repeat;} .social-icons .wordpress {background: url(../img/social/wordpress.png) no-repeat;} .social-icons .xing {background: url(../img/social/xing.png) no-repeat;} .social-icons .yahoo {background: url(../img/social/yahoo.png) no-repeat;} .social-icons .youtube {background: url(../img/social/youtube.png) no-repeat;} .social-icons .vk {background: url(../img/social/vk.png) no-repeat;} .social-icons .instagram {background: url(../img/social/instagram.png) no-repeat;} .social-icons .reddit {background: url(../img/social/reddit.png) no-repeat;} /*** Inline Social Icons ***/ .social-icon { display:inline-block !important; width:28px; height:28px; background-position:0 0; background-repeat:no-repeat; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .social-icon.amazon {background: url(../img/social/amazon.png) no-repeat;} .social-icon.behance {background: url(../img/social/behance.png) no-repeat;} .social-icon.blogger {background: url(../img/social/blogger.png) no-repeat;} .social-icon.deviantart {background: url(../img/social/deviantart.png) no-repeat;} .social-icon.dribbble {background: url(../img/social/dribbble.png) no-repeat;} .social-icon.dropbox {background: url(../img/social/dropbox.png) no-repeat;} .social-icon.evernote {background: url(../img/social/evernote.png) no-repeat;} .social-icon.facebook {background: url(../img/social/facebook.png) no-repeat;} .social-icon.forrst {background: url(../img/social/forrst.png) no-repeat;} .social-icon.github {background: url(../img/social/github.png) no-repeat;} .social-icon.googleplus {background: url(../img/social/googleplus.png) no-repeat;} .social-icon.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;} .social-icon.last-fm {background: url(../img/social/last-fm.png) no-repeat;} .social-icon.linkedin {background: url(../img/social/linkedin.png) no-repeat;} .social-icon.picasa {background: url(../img/social/picasa.png) no-repeat;} .social-icon.pintrest {background: url(../img/social/pintrest.png) no-repeat;} .social-icon.rss {background: url(../img/social/rss.png) no-repeat;} .social-icon.skype {background: url(../img/social/skype.png) no-repeat;} .social-icon.spotify {background: url(../img/social/spotify.png) no-repeat;} .social-icon.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;} .social-icon.tumblr {background: url(../img/social/tumblr.png) no-repeat;} .social-icon.twitter {background: url(../img/social/twitter.png) no-repeat;} .social-icon.vimeo {background: url(../img/social/vimeo.png) no-repeat;} .social-icon.wordpress {background: url(../img/social/wordpress.png) no-repeat;} .social-icon.xing {background: url(../img/social/xing.png) no-repeat;} .social-icon.yahoo {background: url(../img/social/yahoo.png) no-repeat;} .social-icon.youtube {background: url(../img/social/youtube.png) no-repeat;} .social-icon.vk {background: url(../img/social/vk.png) no-repeat;} .social-icon.instagram {background: url(../img/social/instagram.png) no-repeat;} .social-icon.reddit {background: url(../img/social/reddit.png) no-repeat;} .social-icon:hover { background-position:0 -38px; } .social-icon-color { opacity: 0.7; background-position:0 -38px !important; } .social-icon-color:hover { opacity: 1; } /*** Notes ***/ /* Common styles for all types */ .note { margin: 0 0 20px 0; padding: 15px 30px 15px 15px; border-left: 5px solid #eee; } .note h1, .note h2, .note h3, .note h4 { margin-top: 0; } .note p:last-child { margin-bottom: 0; } .note code, .note .highlight { background-color: #fff; } /* Variations */ .note-danger { background-color: #FAEAE6; border-color: #ed4e2a; } .note-warning { background-color: #FCF3E1; border-color: #fcb322; } .note-info { background-color: #E8F6FC; border-color: #57b5e3; } .note-success { background-color: #EBFCEE; border-color: #3cc051; } /*** Demo Utils ***/ .scrollspy-example { position: relative; height: 200px; margin-top: 10px; overflow: auto; } .util-btn-margin-bottom-5 .btn { margin-bottom: 5px !important; } .util-btn-group-margin-bottom-5 .btn-group { margin-bottom: 5px !important; } .fontawesome-demo i { font-size: 18px; } .fontawesome-demo li { padding-top: 5px; padding-bottom: 5px; } .glyphicons-demo ul { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .bs-glyphicons { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .glyphicons-demo ul li { float: left; width: 25%; height: 115px; padding: 10px; margin: 0 -1px -1px 0; font-size: 12px; line-height: 1.4; text-align: center; border: 1px solid #ddd; } .glyphicons-demo .glyphicon { display: block; margin: 5px auto 10px; font-size: 24px; } .glyphicons-demo ul li:hover { background-color: rgba(86,61,124,.1); } @media (min-width: 768px) { .glyphicons-demo ul li { width: 12.5%; } } /*** Forms ****/ input.placeholder, textarea.placeholder { color: #aaa !important; } .help-block { margin-top: 5px; margin-bottom: 5px; } .form-inline input { margin-bottom: 0px !important; } .control-label { margin-top: 2px; } .form-control-static { font-size: 14px; padding-top: 7px; } .control-label .required { color: #e02222; font-size: 12px; padding-left: 2px; } .switch-wrapper { display: inline-block; } .form { padding: 0 !important; } .form-body { padding: 10px; } .form-actions { padding: 20px 10px; margin-top: 20px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; *zoom: 1; } .form-actions.nobg { background-color: transparent; } .form-actions.top { margin-top: 0; margin-bottom: 20px; border-top: 0; border-bottom: 1px solid #e5e5e5; } .form-actions.fluid { padding: 20px 0; } .form-actions.fluid > [class^="col-"] { padding-left: 13px; } .form-actions:before, .form-actions:after { display: table; line-height: 0; content: ""; } .form-actions:after { clear: both; } .form-section { margin: 30px 0px 25px 0px; padding-bottom: 5px; border-bottom: 1px solid #eee; } .form .form-section:first-child { margin-top: 5px; } .help-inline { font-size: 13px; color: #737373; display: inline-block; padding: 5px; } /* left, right aligned form actions */ .form-actions.right { padding-left: 0; padding-right: 10px; text-align: right; } .form-actions.left { padding-left: 10px; padding-right: 0; text-align: left; } /* Checkboxes */ .form-group .checkbox { padding-left: 0; } .checkbox-list > label { display: block; } .checkbox-list > label.checkbox-inline { display: inline-block; } .checkbox-list > label.checkbox-inline:first-child { padding-left: 0; } /* Radios */ .radio-list > label { display: block; } .radio-list > label.radio-inline { display: inline-block; } .radio-list > label.radio-inline:first-child { padding-left: 0; } .form-horizontal .radio-list .radio { padding-top: 1px; } /* Rows seperated form layout */ .form-row-seperated .form-group { margin: 0; border-bottom: 1px solid #efefef; padding: 10px 10px 10px 0px; } .form-row-seperated .form-group.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px; } .form-row-seperated .form-actions { margin-top: 0; } .form-row-seperated .form-body { padding: 0; margin-top: 0; } .form-row-seperated .help-block { margin-bottom: 0; } /* form bordered */ .form-bordered .form-body { margin: 0; padding: 0; } .form-bordered .form-actions { margin-top: 0; } .form-bordered .form-group { margin: 0; border-bottom: 1px solid #efefef; } .form-bordered .form-group.last { border-bottom: 0; } .form-bordered .help-block { margin-bottom: 0; } .form-bordered .control-label { padding-top: 16px; } .form-bordered .form-group > div { padding: 10px; border-left: 1px solid #efefef; } .form-bordered .form-actions.fluid > .row > div { padding-left: 10px; } .form-horizontal.form-bordered.form-row-stripped .form-group:nth-child(even) { background-color: #fcfcfc; } .form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) { background-color: #fcfcfc; } .form-horizontal.form-bordered.form-row-stripped .form-control { background: #fff !important; } .form-horizontal.form-bordered.form-label-stripped .form-group:nth-child(even) > div { background-color: #ffffff; } /*** Bordered form layout ***/ .form-bordered .form-control { margin: 0; } /*** Disabled Menu Link ***/ .disabled-link > a > span.text, .disabled-link > a > span.title { font-style: italic !important; color: #888 !important; } .disabled-link > a:hover { cursor: not-allowed !important; } /*** Responsive & Scrollable Tables ***/ .table-scrollable { display: block; width: 100%; overflow-x: auto; overflow-y: auto; height: 100%; border: 0px solid #dddddd; margin: -0px 0 !important; } .table-scrollable > .table { width: 100% !important; margin: 0 !important; margin-bottom: 0; background-color: #fff; } .table-scrollable > .table > thead > tr > th, .table-scrollable > .table > tbody > tr > th, .table-scrollable > .table > tfoot > tr > th, .table-scrollable > .table > thead > tr > td, .table-scrollable > .table > tbody > tr > td, .table-scrollable > .table > tfoot > tr > td { white-space: nowrap; } .table-scrollable > .table-bordered { border: 0; } .table-scrollable > .table-bordered > thead > tr > th:first-child, .table-scrollable > .table-bordered > tbody > tr > th:first-child, .table-scrollable > .table-bordered > tfoot > tr > th:first-child, .table-scrollable > .table-bordered > thead > tr > td:first-child, .table-scrollable > .table-bordered > tbody > tr > td:first-child, .table-scrollable > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .table-scrollable > .table-bordered > thead > tr > th:last-child, .table-scrollable > .table-bordered > tbody > tr > th:last-child, .table-scrollable > .table-bordered > tfoot > tr > th:last-child, .table-scrollable > .table-bordered > thead > tr > td:last-child, .table-scrollable > .table-bordered > tbody > tr > td:last-child, .table-scrollable > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .table-scrollable > .table-bordered > thead > tr:last-child > th, .table-scrollable > .table-bordered > tbody > tr:last-child > th, .table-scrollable > .table-bordered > tfoot > tr:last-child > th, .table-scrollable > .table-bordered > thead > tr:last-child > td, .table-scrollable > .table-bordered > tbody > tr:last-child > td, .table-scrollable > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } /*** Responsive Flip Scroll Tables ***/ .flip-scroll table { width: 100%; } @media only screen and (max-width: 800px) { .flip-scroll .flip-content:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .flip-scroll * html .flip-content { zoom: 1; } .flip-scroll *:first-child+html .flip-content { zoom: 1; } .flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; } .flip-scroll th, .flip-scroll td { margin: 0; vertical-align: top; } .flip-scroll th { text-align: left; border: 0 !important; border-bottom: 1px solid #ddd !important; border-right: 1px solid #ddd !important; font-size: 13px !important; padding: 5px; width: auto !important; } .flip-scroll table { display: block; position: relative; width: 100%; } .flip-scroll thead { display: block; float: left; } .flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } .flip-scroll thead tr { display: block; border: !important; } .flip-scroll th { display: block; text-align: right; } .flip-scroll tbody tr { display: inline-block; vertical-align: top; margin-left: -5px; } .flip-scroll td { display: block; min-height: 1.25em; text-align: left; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important} .flip-scroll td:first-child {} /* sort out borders */ .flip-scroll th { border-bottom: 0; border-left: 0; } .flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; } .flip-scroll tbody tr { border-left: 1px solid #ddd; } .flip-scroll th:last-child, .flip-scroll td:last-child { border-bottom: 1px solid #ddd; } } /* remove rounds from all elements */ div, input, select, textarea, span, img, table, td, th, p, a, button, ul, code, pre, li { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } /*** Buttons & Dropdown Buttons ***/ .btn { border-width: 0; padding: 7px 14px; font-size: 14px; outline: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-text-shadow: none; -moz-text-shadow: none; text-shadow: none; } /* fix jumping group buttons */ .btn-group.btn-group-solid .btn + .btn, .btn-group.btn-group-solid .btn + .btn-group.btn-group-solid, .btn-group.btn-group-solid .btn-group.btn-group-solid + .btn, .btn-group.btn-group-solid .btn-group.btn-group-solid + .btn-group.btn-group-solid { margin-left: 0px; } .btn-group-vertical.btn-group-solid > .btn + .btn, .btn-group-vertical.btn-group-solid > .btn + .btn-group, .btn-group-vertical.btn-group-solid > .btn-group + .btn, .btn-group-vertical.btn-group-solid > .btn-group + .btn-group { margin-top: 0px; margin-left: 0; } .btn-default { border-width: 1px; padding: 6px 13px; } .btn.red-stripe { border-left: 3px solid #d84a38; } .btn.blue-stripe { border-left: 3px solid #4d90fe; } .btn.purple-stripe { border-left: 3px solid #852b99; } .btn.green-stripe { border-left: 3px solid #35aa47; } .btn.yellow-stripe { border-left: 3px solid #ffb848; } .btn.dark-stripe { border-left: 3px solid #555555; } .btn.default { color: #333333; text-shadow: none; background-color: #e5e5e5; } .btn.default:hover, .btn.default:focus, .btn.default:active, .btn.default.active, .btn.default[disabled], .btn.default.disabled { color: #333333; background-color: #d8d8d8 !important; outline: none !important; } /* Red */ .btn.red { color: white; text-shadow: none; background-color: #d84a38; } .btn.red:hover, .btn.red:focus, .btn.red:active, .btn.red.active, .btn.red[disabled], .btn.red.disabled { background-color: #bb2413 !important; color: #fff !important; outline: none !important; } /* Blue */ .btn.blue { color: white; text-shadow: none; background-color: #4d90fe; } .btn.blue:hover, .btn.blue:focus, .btn.blue:active, .btn.blue.active, .btn.blue[disabled], .btn.blue.disabled { background-color: #0362fd !important; color: #fff !important; outline: none !important; } .btn-group .btn.blue.dropdown-toggle { background-color: #4d90fe !important; } .btn-group .btn.blue:hover, .btn-group .btn.blue:focus, .btn-group .btn.blue:active, .btn-group .btn.blue.active, .btn-group .btn.blue.disabled, .btn-group .btn.blue[disabled] { background-color: #0362fd !important; color: #fff !important; outline: none !important; } /* Green */ .btn.green { color: white; text-shadow: none; background-color: #35aa47; } .btn.green:hover, .btn.green:focus, .btn.green:active, .btn.green.active, .btn.green.disabled, .btn.green[disabled]{ background-color: #1d943b !important; color: #fff !important; outline: none !important; } /* Purple */ .btn.purple { color: white; text-shadow: none; background-color: #852b99; } .btn.purple:hover, .btn.purple:focus, .btn.purple:active, .btn.purple.active, .btn.purple.disabled, .btn.purple[disabled] { background-color: #6d1b81 !important; color: #fff !important; outline: none !important; } .btn-group .btn.purple.dropdown-toggle { background-color: #852b99 !important; } .btn-group .btn.purple:hover, .btn-group .btn.purple:focus, .btn-group .btn.purple:active, .btn-group .btn.purple.active, .btn-group .btn.purple.disabled, .btn-group .btn.purple[disabled] { background-color: #6d1b81 !important; color: #fff !important; outline: none !important; } /* Yellow */ .btn.yellow { color: white; text-shadow: none; background-color: #ffb848; } .btn.yellow:hover, .btn.yellow:focus, .btn.yellow:active, .btn.yellow.active, .btn.yellow.disabled, .btn.yellow[disabled] { background-color: #eca22e !important; color: #fff !important; outline: none !important; } .btn-group .btn.yellow.dropdown-toggle { background-color: #ffb848 !important; } .btn-group .btn.yellow:hover, .btn-group .btn.yellow:focus, .btn-group .btn.yellow:active, .btn-group .btn.yellow.active, .btn-group .btn.yellow.disabled, .btn-group .btn.yellow[disabled] { background-color: #eca22e !important; color: #fff !important; outline: none !important; } /* Black */ .btn.dark { color: white; text-shadow: none; background-color: #888888; } .btn.dark:hover, .btn.dark:focus, .btn.dark:active, .btn.dark.active, .btn.dark.disabled, .btn.dark[disabled] { background-color: #555555 !important; color: #fff !important; outline: none !important; } .btn-group .btn.dark.dropdown-toggle { background-color: #888888 !important; } .btn-group .btn.dark:hover, .btn-group .btn.dark:focus, .btn-group .btn.dark:active, .btn-group .btn.dark.active, .btn-group .btn.dark.disabled, .btn-group .btn.dark[disabled] { background-color: #555555 !important; color: #fff !important; outline: none !important; } .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; vertical-align: middle; } .btn-lg > i { font-size: 18px; } .btn > i { font-size: 14px; } .btn-sm, .btn-xs { padding: 5px 10px; font-size: 12px; line-height: 1.5; } .btn-sm > i, .btn-xs > i { font-size: 13px; } .btn-xs { padding: 1px 5px; } .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; } /*** Metro icons ***/ [class^="m-icon-"] { display: inline-block; width: 14px; height: 14px;; margin-top: 3px; line-height: 14px; vertical-align: top; background-image: url(../img/syncfusion-icons.png); background-position: 0 0; background-repeat: no-repeat; } [class^="m-icon-big-"] { display: inline-block; width: 30px; height: 30px; margin: 6px; vertical-align: middle; background-image: url(../img/syncfusion-icons.png); background-position: 0 0px; background-repeat: no-repeat; } /* large icons */ .btn.m-icon-big { padding: 9px 16px 8px 16px; } .btn.m-icon-big.m-icon-only{ padding: 9px 8px 8px 0px; } .btn.m-icon-big [class^="m-icon-big-"] { margin: 0 0 0 10px; } .btn.m-icon-ony > i { margin-left: 0px; } /* default icons */ .btn.m-icon { padding: 7px 14px 7px 14px; } .btn.m-icon [class^="m-icon-"] { margin: 4px 0 0 5px; } .btn.m-icon.m-icon-only { padding: 7px 10px 7px 6px; } /* white icon */ .m-icon-white { background-image: url(../img/syncfusion-icons-white.png); } /* Misc */ .m-icon-swapright { background-position: -27px -10px; } .m-icon-swapdown { background-position: -68px -10px; } .m-icon-swapleft { background-position: -8px -10px; } .m-icon-swapup { background-position: -46px -10px; } .m-icon-big-swapright{ background-position: -42px -28px; } .m-icon-big-swapdown{ background-position: -115px -28px; } .m-icon-big-swapleft{ background-position: -6px -28px; } .m-icon-big-swapup{ background-position: -78px -28px; } /*** Popover ***/ .popover { -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); padding: 0 !important; } .popover .popover-title { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; margin: 0 !important; } .info .popover .popover-title, .popover.info .popover-title, .info .popover .popover-content, .popover.info .popover-content { color:#27a9e3; } .success .popover .popover-title, .popover.success .popover-title, .success .popover .popover-content, .popover.success .popover-content { color:#468847; } .error .popover .popover-title, .popover.error .popover-title, .error .popover .popover-content, .popover.error .popover-content { color:#B94A48; } .warning .popover .popover-title, .popover.warning .popover-title, .warning .popover .popover-content, .popover.warning .popover-content { color:#C09853; } /*** Dropdown ***/ /*Fixing dropdown issue on mobile devices in Bootstrap 3.2.2*/ .dropdown-backdrop { position: static; } .dropdown:hover .caret, .open.dropdown .caret { opacity: 1; filter: alpha(opacity=100); } .dropdown.open .dropdown-toggle { color: #08c; background: #ccc; background: rgba(0, 0, 0, 0.3); } /*** Dropdown Menu ***/ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; list-style: none; text-shadow: none; padding: 0px; margin:0px; background-color: #ffffff; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); font-size: 14px; font-family: "Segoe UI",Helvetica, Arial, sans-serif; border: 1px solid #ddd; } .dropdown.inline .dropdown-menu { display: inline-block; position: relative; } .dropdown-menu.bottom-up { top: auto; bottom: 100%; margin-bottom: 2px; } .dropdown-menu li > a { padding: 6px 0 6px 13px; color: #333; text-decoration: none; display: block; clear: both; font-weight: normal; line-height: 18px; white-space: nowrap; } .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { text-decoration: none; background-image: none; background-color: #eee; color: #333; filter:none; } /* dropdown sub menu support for Bootsrap 3 */ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropup .dropdown-submenu > .dropdown-menu { top: auto; bottom: 0; margin-top: 0; margin-bottom: -2px; } .dropdown-submenu > a:after { position: absolute; display: inline-block; font-size: 14px; right: 7px; top: 9px; font-family: FontAwesome; height: auto; content: "\f105"; font-weight: 300; } /* hack for chrome and safari */ @media all and (-webkit-min-device-pixel-ratio:0) { .dropdown-submenu > a:after { top: 7px; } } .ie1 .dropdown-submenu > a:after { margin-top: 2px; } .dropdown-submenu:hover > a:after { border-left-color: #ffffff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; } .nav.pull-right > li > .dropdown-menu, .nav > li > .dropdown-menu.pull-right { right: 0; left: auto; } .nav.pull-right > li > .dropdown-menu:before, .nav > li > .dropdown-menu.pull-right:before { right: 12px; left: auto; } .nav.pull-right > li > .dropdown-menu:after, .nav > li > .dropdown-menu.pull-right:after { right: 13px; left: auto; } .nav.pull-right > li > .dropdown-menu .dropdown-menu, .nav > li > .dropdown-menu.pull-right .dropdown-menu { right: 100%; left: auto; margin-right: -1px; margin-left: 0; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu { position: absolute; float: left; width: auto; margin-top: 0; background-color: #ffffff; border: 1px solid #ddd; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); } .navbar-nav .open .dropdown-menu > li > a { padding: 6px 0 6px 13px; color: #333 !important; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-color: #eee !important; } } /* bagin: sidebar menu badges */ /*** Dropdown Checkboxes (in v1.3) ***/ .dropdown-checkboxes { padding: 5px; } .dropdown-checkboxes label { display: block; font-weight: 300; color: #333; margin-bottom: 4px; margin-top: 4px; } /*** Dropdown Menu Badges ***/ .dropdown-menu > li > a > .badge { position: absolute; margin-top: 1px; right: 3px; display: inline; font-size: 11px; font-weight: 300; text-shadow:none; height: 18px; padding: 3px 6px 3px 6px; text-align: center; vertical-align: middle; -webkit-border-radius: 12px !important; -moz-border-radius: 12px !important; border-radius: 12px !important; } .dropdown-menu > li > a > .badge.badge-roundless { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } /* end: sidebar menu badges */ /*** Forms ***/ code { border: 1px solid #e1e1e1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } label { font-weight: 400; font-size: 14px; } .form-control:-moz-placeholder { color: #999999; } .form-control::-moz-placeholder { color: #999999; } .form-control:-ms-input-placeholder { color: #999999; } .form-control::-webkit-input-placeholder { color: #999999; } .form-control { font-size: 14px; font-weight: normal; color: #333333; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .form-control:focus { border-color: #999999; outline: 0; -webkit-box-shadow: none !important; box-shadow: none !important; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eeeeee; } .uneditable-input { padding: 6px 12px; min-width: 206px; font-size: 14px; font-weight: normal; height: 34px; color: #333333; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } label.form-control { display: block; margin-bottom: 5px; } input[disabled], select[disabled], textarea[disabled] { cursor: not-allowed; background-color: #F4F4F4 !important; } input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; background-color: #F9F9F9 !important; } /* input groups */ .input-group.input-group-fixed { width: auto !important; } .input-group-addon { border-color: #e5e5e5; background: #e5e5e5; } .input-group-addon > i { color: #999; } /* form control sizing */ .form-control-inline { display: inline-block !important; } .input-xsmall { width: 60px !important; } .input-small { width: 120px !important; } .top9 { margin-top: 9px; } .input-medium { width: 240px !important; } .input-large { width: 320px !important; } .input-xlarge { width: 480px !important; } /*** Input spinner(in v1.4) ***/ input[type="text"].spinner, input[type="password"].spinner, input[type="datetime"].spinner, input[type="datetime-local"].spinner, input[type="date"].spinner, input[type="month"].spinner, input[type="time"].spinner, input[type="week"].spinner, input[type="number"].spinner, input[type="email"].spinner, input[type="url"].spinner, input[type="search"].spinner, input[type="tel"].spinner, input[type="color"].spinner { background-image: url("../img/input-spinner.gif") !important; background-repeat: no-repeat; background-position: right 8px; } @media (max-width: 768px) { .input-large { width: 250px !important; } .input-xlarge { width: 300px !important; } } /*** Error States ***/ .has-warning .help-inline, .has-warning .help-block, .has-warning .control-label { color: #c09853; } .has-warning .form-control { border-color: #c09853; -webkit-box-shadow: none; box-shadow: none; } .has-warning .form-control:focus { border-color: #a47e3c; -webkit-box-shadow: none; box-shadow: none; } .has-warning .input-group-addon { color: #c09853; background-color: #fcf8e3; border-color: #c09853; } .has-error .help-inline, .has-error .help-block, .has-error .control-label { color: #b94a48; } .has-error .form-control { border-color: #b94a48; -webkit-box-shadow: none; box-shadow: none; } .has-error .form-control:focus { border-color: #953b39; -webkit-box-shadow: none; box-shadow: none; } .has-error .input-group-addon { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } .has-success .help-inline, .has-success .help-block, .has-success .control-label { color: #468847; } .has-success .form-control { border-color: #468847; -webkit-box-shadow: none; box-shadow: none; } .has-success .form-control:focus { border-color: #356635; -webkit-box-shadow: none; box-shadow: none; } .has-success .input-group-addon { color: #468847; background-color: #dff0d8; border-color: #468847; } /*** Custom label and badges ***/ .label, .badge { font-weight: 300; text-shadow: none !important; } .label { font-size: 12px; padding: 3px 6px 3px 6px; } .label.label-sm { font-size: 12px; padding: 1px 4px 1px 4px; } h1 .label, h2 .label, h3 .label, h4 .label, h5 .label, h6 .label, h7 .label { font-size: 75%; } .badge { font-size: 11px !important; font-weight: 300; text-align: center; background-color: #e02222; height: 18px; padding: 3px 6px 3px 6px; -webkit-border-radius: 12px !important; -moz-border-radius: 12px !important; border-radius: 12px !important; text-shadow:none !important; text-align: center; vertical-align: middle; } .badge.badge-roundless { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .badge-default, .label-default { background-color: #999 !important; } .badge-primary, .label-primary { background-color: #428bca !important; } .label-success, .badge-success { background-color: #3cc051; background-image: none !important; } .label-warning, .badge-warning { background-color: #fcb322; background-image: none !important; } .label-danger, .badge-danger { background-color: #ed4e2a; background-image: none !important; } .label-info, .badge-info { background-color: #57b5e3; background-image: none !important; } /* fix badge position for navs */ .nav.nav-pills > li > a > .badge { margin-top: -2px; } .nav.nav-stacked > li > a > .badge { margin-top: 1px; margin-bottom: 0px; } /*** Iconic Labels ***/ .label.label-icon { padding: 4px 1px 4px 5px; margin-right: 2px; text-align: center !important; } .ie9 .label.label-icon, .ie10 .label.label-icon { padding: 3px 0px 3px 3px; } .label.label-icon > i { font-size: 12px; text-align: center !important; } /*** Progress Bars ***/ .progress { border: 0; background-image: none !important; filter: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .progress > .progress-bar-success { background-color: #3cc051; } .progress > .progress-bar-danger { background-color: #ed4e2a; } .progress > .progress-bar-info { background-color: #57b5e3; } .progress > .progress-bar-warning { background-color: #fcb322; } /*** Pagination ***/ .pagination { margin: 10px 0; } .pagination .active > a, .pagination .active > a:hover { background: #eee; border-color: #dddddd; color: #333; } /*** wells ***/ .well { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } /* Bootstrap Tabs */ .dropup.open > .dropdown-toggle, .dropdown.open > .dropdown-toggle { border-color: #ddd !important; } .nav-tabs > li > .dropdown-menu:after, .nav-pills > li > .dropdown-menu:after, .navbar-nav > li > .dropdown-menu:after, .nav-tabs > li > .dropdown-menu:before, .nav-pills > li > .dropdown-menu:before, .navbar-nav > li > .dropdown-menu:before { display: none !important; } .nav-tabs > .dropdown.open > .dropdown-toggle, .nav-pills > .dropdown.open > .dropdown-toggle { background: #eee !important; color: #0d638f !important; } .nav-tabs, .nav-pills { margin-bottom: 10px; } .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } .tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff; } .tabs-below > .nav-tabs, .tabs-below > .nav-pills { border-bottom: 0; margin-bottom: 0px; margin-top: 10px; } .tabs-below > .nav-tabs { border-top: 1px solid #ddd; margin-bottom: 0; margin-top: 10px; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-top-color: #ddd; border-bottom-color: transparent; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus { border-color: transparent #ddd #ddd #ddd; } /*** Bootstrap modal ***/ .modal { z-index: 10050 !important; outline: none !important; } .modal-header { border-bottom: 1px solid #EFEFEF; } .modal-header h3{ font-weight: 300; } .modal-wide { width: 60% !important; } .modal-full { width: 100% !important; } /*** Modal header close button fix ***/ .modal-header .close { margin-top: 0px !important; } .modal > .loading { position: absolute; top: 50%; left:50%; margin-top: -22px; margin-left: -22px; } .modal-backdrop { border: 0 !important; outline: none !important; z-index: 10049 !important; } .modal-backdrop, .modal-backdrop.fade.in { background-color: #333 !important; } .modal-open .header .container-fluid { padding-right: 37px; } body.modal-open{ } /*** Image Carousel ***/ .carousel.image-carousel .carousel-inner { padding-top: 0; padding-bottom: 0; } .carousel.image-carousel .carousel-control i { position: absolute; top:40%; } .carousel.image-carousel.image-carousel-hoverable .carousel-control i { display: none; } .carousel.image-carousel.image-carousel-hoverable:hover .carousel-control i { display: inline-block; } .carousel.image-carousel .carousel-control.left i { left:10px; } .carousel.image-carousel .carousel-control.right i { right:10px; } .carousel.image-carousel .carousel-indicators { margin-top: 10px; bottom: -7px; } .carousel.image-carousel .carousel-indicators li { background-color: #666; } .carousel.image-carousel .carousel-indicators li.active { background-color: #333; } .carousel.image-carousel .carousel-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px 15px 25px 15px; background: #333333; background: rgba(0, 0, 0, 0.75); } .carousel.image-carousel .carousel-caption h4, .carousel.image-carousel .carousel-caption h3, .carousel.image-carousel .carousel-caption h2, .carousel.image-carousel .carousel-caption p { text-align: left; line-height: 20px; color: #ffffff; } .carousel.image-carousel .carousel-caption h2, .carousel.image-carousel .carousel-caption h3, .carousel.image-carousel .carousel-caption h4 { margin: 0 0 5px; } .carousel.image-carousel .carousel-caption h2 a, .carousel.image-carousel .carousel-caption h3 a, .carousel.image-carousel .carousel-caption h4 a { color: #aaa; } .carousel.image-carousel .carousel-caption p { margin-bottom: 0; } .carousel.image-carousel .item { margin: 0; } /*** Bootstrap Tables ***/ .table thead > tr > th { border-bottom: 0; } .table tbody tr.active td, .table tbody tr.active th { background-color: #f5f5f5 !important; } .table tbody tr:hover td, .table tbody tr:hover th, .table tbody tr.active:hover td, .table tbody tr.active:hover th { background-color: #d5e2f7 !important; } .table-striped tbody tr.active:nth-child(odd) td, .table-striped tbody tr.active:nth-child(odd) th { background-color: #017ebc; } /*** Bootstrap Panel ***/ .panel { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } /*** Responsive Theme. Based on http://getbootstrap.com/css/#responsive-utilities-classes ***/ /*** Form Medium Devices Up To Large Devices ***/ @media (min-width: 992px) and (max-width: 1200px) { .page-boxed .header .dropdown .username { display: none; } } /*** From Medium Devices Up To Larger Devices ***/ @media (min-width: 992px) { /*** Page sidebar ***/ .page-sidebar { position: absolute; width: 255px; } .page-sidebar.navbar-collapse { max-height: none !important; } .page-sidebar-fixed .page-sidebar { position: fixed !important; top: 41px; } .page-sidebar-fixed ul.page-sidebar-menu > li.last { margin-bottom: 15px !important; } .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar { z-index: 10000; width: 35px; } .page-sidebar-fixed.page-sidebar-hover-on .page-sidebar .selected { display: none; } .page-sidebar-fixed.page-sidebar-hover-on .page-content { margin-left: 35px; } .page-sidebar-fixed.page-sidebar-hover-on .footer { margin-left: 35px; } .page-sidebar-fixed .page-sidebar-closed .page-sidebar .sidebar-search .submit, .page-sidebar-fixed .page-sidebar .sidebar-toggler { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .page-sidebar-hovering { overflow: hidden !important; } .page-sidebar-hovering .sub-menu, .page-sidebar-hovering span.title, .page-sidebar-hovering span.arrow { display: none !important; } .page-sidebar-hovering .submit { opacity: 0; width: 0 !important; height: 0 !important; } /*** Page content ***/ .page-content { margin-left: 255px; margin-top: 0px; min-height: 760px; padding: 25px 20px 20px 20px; } .page-sidebar-fixed .page-content { min-height: 600px; } .page-content.no-min-height { min-height: auto; } /*** Footer ***/ /* fixed sidebar */ .page-footer-fixed .footer { position: fixed; left: 0; right: 0; z-index: 10000; bottom: 0; } .page-footer-fixed .page-container { margin-bottom: 32px; } .page-footer-fixed.page-sidebar-fixed .footer { margin-left: 0 !important; } /* end: fixed footer */ .page-boxed .footer { padding: 8px 0 5px 0; } .page-sidebar-fixed .footer { margin-left: 255px; background-color: #fff; padding: 8px 20px 5px 20px; } .page-sidebar-fixed .footer .footer-inner { color: #333; } .page-sidebar-fixed.page-sidebar-closed .footer { margin-left: 35px; } .page-sidebar-fixed .footer .footer-tools .go-top { background-color: #666; } .page-sidebar-fixed .footer .footer-tools .go-top i { color: #ddd; } /* boxed layout */ .page-boxed .header .navbar-brand { margin-left: 0px !important; width: 226px; } .page-boxed .header .navbar-brand img { margin-left: 10px; } .page-boxed .header .navbar-nav { margin-right: 0px; } } /*** Up To Medium Devices ***/ @media (max-width:991px) { /*** Page header ***/ .header { padding: 0 20px 0 20px; position: relative; clear: both; } .header .navbar-toggle { display: inline-block; } .page-sidebar.navbar-collapse { max-height: 340px; } .page-sidebar.navbar-collapse.collapse { display: none !important; } .page-sidebar.navbar-collapse.in { overflow: hidden !important; overflow-y: auto !important; } .header .nav li.dropdown i { display: inline-block; position: relative; top:1px; right:0px; } .header .navbar-nav { display: block; margin-bottom: 0px !important; } .header .navbar-nav .open .dropdown-menu { position: absolute; } .header .navbar-nav { display: inline-block; float: right; margin: 0; } .header .navbar-nav > li { float: left; } .header .navbar-nav > li > a { padding-top1: 15px; padding-bottom1: 15px; } .header .navbar-brand { margin-left: 0px !important; padding-left: 0px !important; } .header .navbar-brand img { margin-left: 4px !important; } /*** Page container ***/ .page-container { margin: 0 !important; padding: 0 !important; } /*** Page content ***/ .page-content { margin: 0px !important; padding: 20px 20px 20px 20px !important; min-height: 280px; } /*** Page sidebar ***/ .page-sidebar { border-top: 0 !important; margin: 20px; } .page-sidebar.in { border-top: 0 !important; margin: 20px; position: relative; z-index: 5; } .page-sidebar .sidebar-toggler { display: none; } .page-sidebar ul { margin-top:0px; width:100%; } .page-sidebar .selected { display: none !important; } .page-sidebar .sidebar-search .input-box { width: 220px; } /*** Styler panel ***/ .styler-panel { top:55px; right:20px; } /*** Boxed Layout ***/ .page-boxed .header > .container, .page-boxed .footer > .container, .page-boxed > .container { max-width: none !important; margin: 0 !important; padding: 0 !important; } } /*** From Small Devices Up To Medium Devices ***/ @media (min-width: 768px) and (max-width: 991px) { /*** Body ***/ body { padding-top: 0px; } /*** Page sidebar ***/ .page-sidebar .btn-navbar.collapsed .arrow { display: none; } .page-sidebar .btn-navbar .arrow { position: absolute; right: 25px; width: 0; height: 0; top:50px; border-bottom: 15px solid #5f646b; border-left: 15px solid transparent; border-right: 15px solid transparent; } } /*** Extra Small Devices Only ***/ @media (max-width: 767px) { /*** Page header ***/ .header { padding: 0 10px 0 10px; } .header .top-nav .nav{ margin-top: 0px; margin-right: 5px; } .header .nav > li > .dropdown-menu.notification:after, .header .nav > li > .dropdown-menu.notification:before { margin-right: 180px; } .header .nav > li > .dropdown-menu.notification { margin-right: -180px; } .header .nav > li > .dropdown-menu.inbox:after, .header .nav > li > .dropdown-menu.inbox:before { margin-right: 140px; } .header .nav > li > .dropdown-menu.inbox { margin-right: -140px; } .header .nav > li > .dropdown-menu.tasks:after, .header .nav > li > .dropdown-menu.tasks:before { margin-right: 90px; } .header .nav > li > .dropdown-menu.tasks { margin-right: -90px; } /* Header logo */ .header .navbar-brand { margin-left: 0px !important; width: 110px; } /*** Page content ***/ .page-content { padding: 20px 10px 10px 10px !important; overflow: hidden; } /*** Page title ***/ .page-title { margin-bottom: 20px; font-size: 18px; } .page-title small { font-size: 13px; padding-top: 3px; } /*** Styler pagel ***/ .styler-panel { top:58px; right:12px; } /*** Page breadcrumb ***/ .breadcrumb { padding-left: 10px; padding-right: 10px; } /*** Portlet form action ***/ .portlet-body.form .form-actions{ padding-left: 15px; } /*** Form input validation states ***/ .input-icon .input-error, .input-icon .input-warning, .input-icon .input-success { top:-27px; float: right; right:10px !important; } /*** Advance tables ***/ .table-advance tr td.highlight:first-child a { margin-left: 8px; } /*** Footer ***/ .footer { padding-left: 10px; padding-right: 10px; } .footer .go-top { float: right; display: block; margin-right: 0px; } /*** Vertical inline menu ***/ .ver-inline-menu li.active:after { display: none; } /*** Form controls ***/ .form-horizontal .form-actions { padding-left: 180px; } .portlet .form-horizontal .form-actions { padding-left: 190px; } } /*** The Most Extra Small Devices Landscape Mode Only ***/ @media (max-width: 480px) { /*** Header navbar ***/ .header .navbar-nav { display: block !important; margin-top: 0px !important; } .header .navbar-nav > li.dropdown .dropdown-toggle { margin-top:-1px !important; } .header .navbar-nav li.dropdown .dropdown-toggle .badge { top: 8px; } /*** Page sidebar ***/ .page-sidebar, .page-sidebar.in { margin: 0 10px 10px 10px; } /*** Page title ***/ .page-title small { display: block; clear: both; } /*** Forms ***/ .portlet .form-horizontal .form-actions { padding-left: 10px; } /*** Dashboard date range panel ***/ .page-content .breadcrumb .dashboard-date-range { padding-bottom: 8px; } .page-content .breadcrumb .dashboard-date-range span { display: none; } .page-content .breadcrumb > .btn-group span { display: none; } .page-content .breadcrumb > .btn-group > .btn { padding-left: 7px; padding-right: 7px; } /*** Hidden phone ***/ .hidden-480 { display: none !important; } } /*** The Most Extra Small Devices Portrait Mode Only ***/ @media (max-width: 320px) { .header .nav > li.dropdown .dropdown-toggle { padding-left: 8px !important; padding-right: 8px !important; } /*** Hidden phone ***/ .hidden-320 { display: none; } .header .navbar-brand { width: 100px; } }

Related: See More


Questions / Comments: