/* Add additional stylesheets below
-------------------------------------------------- */

/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/

/* Body and structure
-------------------------------------------------- */

body { position: relative;  /*padding-top: 40px;*/  /*background: rgb(145, 145, 145);
        background: url("../img/5.png");*/

/*background: url("../img/transparent-bg.gif") repeat scroll 0 0 rgb(60, 59, 59); */ }

/* Code in headings */
h3 code { font-size: 14px; font-weight: normal; }
.container { width: 1250px; max-width: 100%; }

/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar { font-size: 13px; }

/* Change the docs' brand */
body > .navbar .brand { padding-right: 0; padding-left: 0; margin-left: 20px; float: right; font-weight: bold; color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .125); -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
body > .navbar .brand:hover { text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .4); }

/* Sections
-------------------------------------------------- */

/* padding for in-page bookmarks and fixed navbar */
section { padding-top: 5px; }
section > .page-header, section > .lead { color: #5a5a5a; }
section > ul li { margin-bottom: 5px; }

/* Separators (hr) */
.bs-docs-separator { margin: 40px 0 39px; }

/* Faded out hr */
hr.soften { height: 1px; margin: 70px 0; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); border: 0; }

/* Jumbotrons
-------------------------------------------------- */

/* Base class
------------------------- */
.jumbotron { border-top: #333 5px solid; border-bottom: #333 5px solid; position: relative; padding: 5px 0; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075); background-image: url("../img/bluegradient.png"); background-image: url("../img/bg_header.png"); background-repeat: no-repeat; background-color: #cb4d35; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88bfe8', endColorstr='#70b0e0', GradientType=0); }
.jumbotron h1 { font-size: 80px; font-weight: bold; letter-spacing: -1px; line-height: 1; }
.jumbotron p { font-size: 24px; font-weight: 300; line-height: 1.25; margin-bottom: 30px; }

/* Link styles (used on .masthead-links as well) */
.jumbotron a { color: #fff; color: rgba(255, 255, 255, .5); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.jumbotron a:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .25); }
.btn-simrs-header { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #363636; background-image: -moz-linear-gradient(top, #444444, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); background-image: -webkit-linear-gradient(top, #444444, #222222); background-image: -o-linear-gradient(top, #444444, #222222); background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); padding: 10px 50px; }

/* Download button */
.masthead .btn { padding: 19px 24px; font-size: 24px; font-weight: 200; color: #fff; /* redeclare to override the `.jumbotron a` */ border: 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-transition: none; -moz-transition: none; transition: none; }

/* Badge */
.right-badge { position: absolute; right: 0px; top: -5px; }
.right-badge img { max-width: 75px; }

/* Pattern overlay
------------------------- */
.jumbotron .container { position: relative; z-index: 2; width: 100% !important; padding: 0 25px; box-sizing: border-box; }
.jumbotron:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  /*background: url(../img/masthead-pat.gif) repeat center center;*/ opacity: .4; }
@media
only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1) {
  .jumbotron:after { background-size: 150px 150px; }
}
#topmenu.navbar .container { width: 100% !important; }

/* Masthead (docs home)
------------------------- */
.masthead { padding: 70px 0 80px; margin-bottom: 0; color: #fff; }
.masthead h1 { font-size: 120px; line-height: 1; letter-spacing: -2px; }
.masthead p { font-size: 40px; font-weight: 200; line-height: 1.25; }

/* Textual links in masthead */
.masthead-links { margin: 0; list-style: none; }
.masthead-links li { display: inline; padding: 0 10px; color: rgba(255, 255, 255, .25); }

/* Social proof buttons from GitHub & Twitter */
.bs-docs-social { padding: 15px 0; text-align: center; background-color: #f5f5f5; border-top: 1px solid #fff; border-bottom: 1px solid #ddd; }

/* Quick links on Home */
.bs-docs-social-buttons { margin-left: 0; margin-bottom: 0; padding-left: 0; list-style: none; }
.bs-docs-social-buttons li { display: inline-block; padding: 5px 8px; line-height: 1; *display: inline; *zoom: 1; }

/* Subhead (other pages)
------------------------- */
.subhead { text-align: left;  /*border-bottom: 1px solid #ddd;*/ }
.subhead h1 { font-size: 60px; }
.subhead p { margin-bottom: 20px; }
.subhead .navbar { display: none; }

/* Marketing section of Overview
-------------------------------------------------- */
.marketing { text-align: center; color: #5a5a5a; }
.marketing h1 { margin: 60px 0 10px; font-size: 60px; font-weight: 200; line-height: 1; letter-spacing: -1px; }
.marketing h2 { font-weight: 200; margin-bottom: 5px; }
.marketing p { font-size: 16px; line-height: 1.5; }
.marketing .marketing-byline { margin-bottom: 40px; font-size: 20px; font-weight: 300; line-height: 1.25; color: #999; }
.marketing-img { display: block; margin: 0 auto 30px; max-height: 145px; }

/* Footer
-------------------------------------------------- */
.footer { text-align: center; padding: 1px 0; margin-top: 10px; border-top: 1px solid #e5e5e5; background-color: #f5f5f5; position: fixed; bottom: 0px; left: 0; width: 100%; }
.footer p { margin-bottom: 0; color: #777; }
.footer-links { margin: 5px 0; }
.footer-links li { display: inline; padding: 0 2px; }
.footer-links li:first-child { padding-left: 0; }
.clear { height: 20px; }

/* Special grid styles
-------------------------------------------------- */
.show-grid { margin-top: 0px; margin-bottom: 1px; }
.show-grid [class*="span"] { background-color: #F7D9D9; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; min-height: 20px; line-height: 20px; }
.show-grid [class*="span"]:hover { background-color: #ddd; }
.show-grid .show-grid { margin-top: 0; margin-bottom: 0; }
.show-grid .show-grid [class*="span"] { margin-top: 5px; }
.yamm-content .show-grid [class*="span"] [class*="span"] { text-align: left; }
.yamm-content .row-fluid [class*="span"] { text-align: left; margin-left: 1px; font-size: 12px; }
.yamm-content .row-fluid [class*="span"] a { margin-left: 10px; display: block; }
.show-grid [class*="span"] [class*="span"] [class*="span"] {  /*background-color: #999;*/ }

/* Mini layout previews
-------------------------------------------------- */
.mini-layout { border: 1px solid #ddd; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.mini-layout, .mini-layout .mini-layout-body, .mini-layout.fluid .mini-layout-sidebar { height: 300px; }
.mini-layout { margin-bottom: 20px; padding: 9px; }
.mini-layout div { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; width: 70%; }
.mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, .mini-layout.fluid .mini-layout-body { float: left; }
.mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; }
.mini-layout.fluid .mini-layout-body { width: 77.5%; margin-left: 2.5%; }

/* Download page
-------------------------------------------------- */
.download .page-header { margin-top: 36px; }
.page-header .toggle-all { margin-top: 5px; }

/* Space out h3s when following a section */
.download h3 { margin-bottom: 5px; }
.download-builder input + h3, .download-builder .checkbox + h3 { margin-top: 9px; }

/* Fields for variables */
.download-builder input[type=text] { margin-bottom: 9px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #d14; }
.download-builder input[type=text]:focus { background-color: #fff; }

/* Custom, larger checkbox labels */
.download .checkbox { padding: 6px 10px 6px 25px; font-size: 13px; line-height: 18px; color: #555; background-color: #f9f9f9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; }
.download .checkbox:hover { color: #333; background-color: #f5f5f5; }
.download .checkbox small { font-size: 12px; color: #777; }

/* Variables section */
#variables label { margin-bottom: 0; }

/* Giant download button */
.download-btn { margin: 36px 0 108px; }
#download p, #download h4 { max-width: 50%; margin: 0 auto; color: #999; text-align: center; }
#download h4 { margin-bottom: 0; }
#download p { margin-bottom: 18px; }
.download-btn .btn { display: block; width: auto; padding: 19px 24px; margin-bottom: 27px; font-size: 30px; line-height: 1; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

/* Misc
-------------------------------------------------- */

/* Make tables spaced out a bit more */
h2 + table, h3 + table, h4 + table, h2 + .row { margin-top: 5px; }

/* Example sites showcase */
.example-sites { xmargin-left: 20px; }
.example-sites img { max-width: 100%; margin: 0 auto; }
.scrollspy-example { height: 200px; overflow: auto; position: relative; }

/* Fake the :focus state to demo it */
.focused { border-color: rgba(82, 168, 236, .8); outline: 0; }

/* For input sizes, make them display block */
.docs-input-sizes select, .docs-input-sizes input[type=text] { display: block; margin-bottom: 9px; }

/* Icons
------------------------- */
.the-icons { margin-left: 0; list-style: none; }
.the-icons li { float: left; width: 25%; line-height: 25px; }
.the-icons i:hover { background-color: rgba(255, 0, 0, .25); }

/* Example page
------------------------- */
.bootstrap-examples h4 { margin: 10px 0 5px; }
.bootstrap-examples p { font-size: 13px; line-height: 18px; }
.bootstrap-examples .thumbnail { margin-bottom: 9px; background-color: #fff; }

/* Bootstrap code examples
-------------------------------------------------- */

/* Base class */
.bs-docs-example { position: relative; margin: 15px 0; padding: 14px 19px 14px; *padding-top: 19px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/* Echo out a label for the example */
.bs-docs-example:after {  /*content: "Example";*/
position: absolute; top: -1px; left: -1px; padding: 3px 7px; font-size: 12px; font-weight: bold; background-color: #f5f5f5; border: 1px solid #ddd; color: #9da0a4; -webkit-border-radius: 4px 0 4px 0; -moz-border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0; }

/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint { margin-top: -20px; padding-top: 15px; }

/* Tweak examples
------------------------- */
.bs-docs-example > p:last-child { margin-bottom: 0; }
.bs-docs-example .table, .bs-docs-example .progress, .bs-docs-example .well, .bs-docs-example .alert, .bs-docs-example .hero-unit, .bs-docs-example .pagination, .bs-docs-example .navbar, .bs-docs-example > .nav, .bs-docs-example blockquote { margin-bottom: 5px; }
.bs-docs-example .pagination { margin-top: 0; }
.bs-navbar-top-example, .bs-navbar-bottom-example { z-index: 1; padding: 0; height: 90px; overflow: hidden; /* cut the drop shadows off */ }
.bs-navbar-top-example .navbar-fixed-top, .bs-navbar-bottom-example .navbar-fixed-bottom { margin-left: 0; margin-right: 0; }
.bs-navbar-top-example { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }
.bs-navbar-top-example:after { top: auto; bottom: -1px; -webkit-border-radius: 0 4px 0 4px; -moz-border-radius: 0 4px 0 4px; border-radius: 0 4px 0 4px; }
.bs-navbar-bottom-example { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
.bs-navbar-bottom-example .navbar { margin-bottom: 0; }
form.bs-docs-example { padding-bottom: 19px; }

/* Images */
.bs-docs-example-images img { margin: 10px; display: inline-block; }

/* Tooltips */
.bs-docs-tooltip-examples { text-align: center; margin: 0 0 10px; list-style: none; }
.bs-docs-tooltip-examples li { display: inline; padding: 0 10px; }

/* Popovers */
.bs-docs-example-popover { padding-bottom: 24px; background-color: #f9f9f9; }
.bs-docs-example-popover .popover { position: relative; display: block; float: left; width: 260px; margin: 20px; }

/* Dropdowns */
.bs-docs-example-submenus { min-height: 180px; }
.bs-docs-example-submenus > .pull-left + .pull-left { margin-left: 20px; }
.bs-docs-example-submenus .dropup > .dropdown-menu, .bs-docs-example-submenus .dropdown > .dropdown-menu { display: block; position: static; margin-bottom: 5px; *width: 180px; }

/* Responsive docs
-------------------------------------------------- */

/* Utility classes table
------------------------- */
.responsive-utilities th small { display: block; font-weight: normal; color: #999; }
.responsive-utilities tbody th { font-weight: normal; }
.responsive-utilities td { text-align: center; }
.responsive-utilities td.is-visible { color: #468847; background-color: #dff0d8 !important; }
.responsive-utilities td.is-hidden { color: #ccc; background-color: #f9f9f9 !important; }

/* Responsive tests
------------------------- */
.responsive-utilities-test { margin-top: 5px; margin-left: 0; list-style: none; overflow: hidden; /* clear floats */ }
.responsive-utilities-test li { position: relative; float: left; width: 25%; height: 43px; font-size: 14px; font-weight: bold; line-height: 43px; color: #999; text-align: center; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.responsive-utilities-test li + li { margin-left: 10px; }
.responsive-utilities-test span { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.responsive-utilities-test span { color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; }

/* Sidenav for Docs
-------------------------------------------------- */
.bs-docs-sidenav { width: 228px; margin: 30px 0 0; padding: 0; background-color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.bs-docs-sidenav > li > a { display: block; width: 190px \9; margin: 0 0 -1px; padding: 8px 14px; border: 1px solid #e5e5e5; }
.bs-docs-sidenav > li:first-child > a { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
.bs-docs-sidenav > li:last-child > a { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; }
.bs-docs-sidenav > .active > a { position: relative; z-index: 2; padding: 9px 15px; border: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); }

/* Chevrons */
.bs-docs-sidenav .icon-chevron-right { float: right; margin-top: 2px; margin-right: -6px; opacity: .25; }
.bs-docs-sidenav > li > a:hover { background-color: #f5f5f5; }
.bs-docs-sidenav a:hover .icon-chevron-right { opacity: .5; }
.bs-docs-sidenav .active .icon-chevron-right, .bs-docs-sidenav .active a:hover .icon-chevron-right { background-image: url(../img/glyphicons-halflings-white.png); opacity: 1; }
.bs-docs-sidenav.affix { top: 40px; }
.bs-docs-sidenav.affix-bottom { position: absolute; top: auto; bottom: 270px; }

/* Ads in headers
-------------------------------------------------- */
.subhead h1, .subhead .lead { margin-right: 340px; }
.carbonad { position: absolute; top: 0; right: 0; margin-top: 0 !important; padding: 15px; height: auto !important; overflow: hidden; /* clearfix */ font-size: 13px !important; line-height: 16px !important; background: #222 !important; /* reset image and color in one line */ background: rgba(0, 0, 0, .5) !important; border: 0 !important; border-radius: 4px; }
.carbonad-img { margin: 0 !important; }
.carbonad-text, .carbonad-tag, .carbonad-tag a { color: #fff !important; }
.carbonad-text, .carbonad-tag { float: none !important; display: block !important; width: auto !important; height: auto !important; margin-left: 145px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
.carbonad-text { padding-top: 0 !important; }
.carbonad-tag { text-align: left !important; }

/* Responsive
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width:1200px) {
  .bs-docs-container { max-width: 970px; }
  .bs-docs-sidenav { width: 258px; }
  .bs-docs-sidenav > li > a { width: 230px \9; /* Override the previous IE8-9 hack */ }
}

/* Desktop
------------------------- */
@media (max-width:980px) {

  /* Unfloat brand */
  body > .navbar-fixed-top .brand { float: left; margin-left: 0; padding-left: 10px; padding-right: 10px; }

  /* Inline-block quick links for more spacing */
  .quick-links li { display: inline-block; margin: 5px; }

  /* When affixed, space properly */
  .bs-docs-sidenav { top: 0; width: 218px; margin-top: 30px; margin-right: 0; }
  .subhead h1, .subhead .lead { margin-right: 0; }
  .carbonad { position: static; width: auto !important; margin-top: 30px !important; }
}

/* Tablet to desktop
------------------------- */
@media (min-width:768px) and (max-width:979px) {

  /* Remove any padding from the body */
  body { padding-top: 0; }

  /* Widen masthead and social buttons to fill body padding */
  .jumbotron { margin-top: -20px; /* Offset bottom margin on .navbar */ }

  /* Adjust sidenav width */
  .bs-docs-sidenav { width: 166px; margin-top: 20px; }
  .bs-docs-sidenav.affix { top: 0; }
}

/* Tablet
------------------------- */
@media (max-width:767px) {

  /* Remove any padding from the body */
  body { padding-top: 0; }

  /* Widen masthead and social buttons to fill body padding */
  .jumbotron { padding: 40px 20px; margin-top: -20px; /* Offset bottom margin on .navbar */ margin-right: -20px; margin-left: -20px; }
  .masthead h1 { font-size: 90px; }
  .masthead p, .masthead .btn { font-size: 24px; }
  .marketing .span4 { margin-bottom: 40px; }
  .bs-docs-social { margin: 0 -20px; }
  .carbonad { position: static; width: auto !important; margin: 40px -20px -40px !important; padding: 20px !important; overflow: hidden; /* clearfix */ border-radius: 0; }

  /* Space out the show-grid examples */
  .show-grid [class*="span"] { margin-bottom: 5px; }

  /* Sidenav */
  .bs-docs-sidenav { width: auto; margin-bottom: 20px; }
  .bs-docs-sidenav.affix { position: static; width: auto; top: 0; }

  /* Unfloat the back to top link in footer */
  .footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .footer p { margin-bottom: 9px; }
}

/* Landscape phones
------------------------- */
@media (max-width:480px) {

  /* Remove padding above jumbotron */
  body { padding-top: 0; }

  /* Change up some type stuff */
  h2 small { display: block; }

  /* Downsize the jumbotrons */
  .jumbotron h1 { font-size: 45px; }
  .jumbotron p, .jumbotron .btn { font-size: 18px; }
  .jumbotron .btn { display: block; margin: 0 auto; }

  /* center align subhead text like the masthead */
  .subhead h1, .subhead p { text-align: center; }

  /* Marketing on home */
  .marketing h1 { font-size: 30px; }
  .marketing-byline { font-size: 18px; }

  /* center example sites */
  .example-sites { margin-left: 0; }
  .example-sites > li { float: none; display: block; max-width: 280px; margin: 0 auto 18px; text-align: center; }
  .example-sites .thumbnail > img { max-width: 270px; }

  /* Do our best to make tables work in narrow viewports */
  table code { white-space: normal; word-wrap: break-word; word-break: break-all; }

  /* Examples: dropdowns */
  .bs-docs-example-submenus > .pull-left { float: none; clear: both; }
  .bs-docs-example-submenus > .pull-left, .bs-docs-example-submenus > .pull-left + .pull-left { margin-left: 0; }
  .bs-docs-example-submenus p { margin-bottom: 0; }
  .bs-docs-example-submenus .dropup > .dropdown-menu, .bs-docs-example-submenus .dropdown > .dropdown-menu { margin-bottom: 10px; float: none; max-width: 180px; }

  /* Examples: modal */
  .modal-example .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; }

  /* Tighten up footer */
  .footer { padding-top: 20px; padding-bottom: 20px; }
}

/*top menu*/
navi { margin-left: -25px; }
navi ul ul { display: none; z-index: 999; }
navi ul li:hover > ul { display: block; }
navi ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); padding: 0 0px; list-style: none; position: relative; display: inline-table; }
navi ul:after { content: ""; clear: both; display: block; }
navi ul li { float: left; }
navi ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); }
navi ul li:hover a { color: #fff; }
navi ul li a { display: block; padding: 10px 40px; color: #757575; text-decoration: none; }
navi ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; margin-left: 0px; }
navi ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; }
navi ul ul li a { padding: 6px 25px; color: #fff; white-space: nowrap; }
navi ul ul li a:hover { background: #4b545f; }
navi ul ul ul { position: absolute; left: 100%; top: 0; margin: 0 !important; }
.default { }
.fixed { position: fixed; top: 0px; left: 0; width: 100%; z-index: 2; }
.hide { display: none; }

/*side menu*/
side { margin-left: -25px; }
side ul ul { display: none; z-index: 1; }
side ul li:hover > ul { display: block; }
side ul { padding: 0 0px; list-style: none; position: relative; display: inline-table; }
side ul:after { content: ""; clear: both; display: block; }
side ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%); }
side ul li:hover a { color: #fff; }
side ul li a { display: block; padding: 10px 5px; color: #757575; text-decoration: none; }
side ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; margin: -69px 0 0 58px; }
side ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; }
side ul ul li a {    /*padding: 15px 40px;*/
padding: 6px 25px; color: #fff; }
side ul ul li a:hover { background: #4b545f; }
side ul ul ul { position: absolute; left: 100%; top: 0; margin: 0 !important; }
#sidemenu { position: fixed; top: 0px; left: 0; z-index: 2; }
side [class^="sideicon-"], side [class*=" sideicon-"] { display: inline-block; width: 55px; height: 55px; line-height: 14px; vertical-align: text-top; background-image: url("../img/glyphicons-halflings.png"); background-position: 7px 7px; background-repeat: no-repeat; margin-top: -13px; margin-left: -13px; }
side [class^="sideicon-"] span, [class*=" sideicon-"] span { display: none; }
side .sideicon-HOME { background-image: url("../img/icon/Home.png"); }
side .sideicon-SISTEM { background-image: url("../img/icon/CD.png"); }
side .sideicon-DATAREFERENSI { background-image: url("../img/icon/Folder.png"); }
side .sideicon-DATAMASTER { background-image: url("../img/icon/Disk.png"); }
side .sideicon-MODULAPLIKASI { background-image: url("../img/icon/Refresh.png"); }
side .sideicon-REGISTRASI { background-image: url("../img/icon/Graph.png"); }
side .sideicon-PEMBAYARAN { background-image: url("../img/icon/Graph.png"); }
side .sideicon-PELAYANANPENUNJANG { background-image: url("../img/icon/Graph.png"); }
side .sideicon-APOTEKDANINSTALASIFARMASI { background-image: url("../img/icon/Graph.png"); }
side .sideicon-PELAYANAN { background-image: url("../img/icon/Graph.png"); }
side .sideicon-SUMBERDAYAMANUSIA { background-image: url("../img/icon/Graph.png"); }
side .sideicon-KEUANGAN { background-image: url("../img/icon/Graph.png"); }
side .sideicon-MODULAPP { background-image: url("../img/icon/Refresh.png"); }
side .sideicon-LOGOUT { background-image: url("../img/icon/Standby.png"); }
.simrslogotext { margin-top: 20px; font-size: 12px; line-height: 1.2em; }
.simrslogotext .cap { font-size: 60px;  /*font-family: "upcll" !important;*/  /*font-family: 'Megrim', sans-serif;*/
font-family: 'Faster One', "upcll", sans-serif;  /* font-weight: 700; */ color: black; -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, 1)); -mask-image: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, 1)); -webkit-mask-image: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, 1)); padding-bottom: 10px; }

/* ray light untuk judul SIMETRIS*/
.ray { background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.81)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.81) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1); width: 50px; height: 38px; position: absolute; top: 11px; opacity: 0; transform-origin:; -webkit-animation: torchAnimation linear 6s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 2s; -webkit-transform-origin:; -moz-animation: torchAnimation linear 10s; -moz-animation-iteration-count: infinite; -moz-animation-delay: 2s; -moz-transform-origin:; }
.ray-shadow { -webkit-animation-delay: 5s; }
@-webkit-keyframes torchAnimation {
  0% { -webkit-transform: translateX(-20px); opacity: 0; }
  20% { -webkit-transform: translateX(50px); opacity: 0.50; }
  40% { -webkit-transform: translateX(120px); opacity: 0.80; }
  60% { -webkit-transform: translateX(190px); opacity: 0.50; }
  80% { -webkit-transform: translateX(260px); opacity: 0; }
  100% { -webkit-transform: translateX(260px); opacity: 0; }
}
@-moz-keyframes torchAnimation {
  0% { -moz-transform: translateX(-20px); opacity: 0; }
  20% { -moz-transform: translateX(50px); opacity: 0.50; }
  40% { -moz-transform: translateX(120px); opacity: 0.80; }
  60% { -moz-transform: translateX(190px); opacity: 0.50; }
  80% { -moz-transform: translateX(260px); opacity: 0; }
  100% { -moz-transform: translateX(260px); opacity: 0; }
}
@font-face { font-family: "upcll"; src: url('../font/upcll.ttf'); }
@font-face { font-family: "Assassin"; src: url('../font/Assassin.ttf'); }
@font-face { font-family: "Expansiva"; font-weight: bold; src: url("../font/Expansiva_bold.otf") format("opentype"); }
@font-face { font-family: "Roboto"; font-weight: bold; src: url("../font/RobotoCondensed-Bold.ttf"); }
@font-face { font-family: "Faster One"; src: url("../font/FasterOne-Regular.otf"); }
.simrslogotext .green { color: green; }
.simrslogotext .blue { color: blue; }
.simrslogotext .black { color: #000; }
.simrslogindiv { min-height: 71px !important; }
.simrslogindiv h5 { font-size: 11px; letter-spacing: 2px; margin-top: 5px !important; margin-bottom: 12px !important; }
.simrslogindiv p, #clock { font-size: 1.3rem; line-height: 2rem; margin: 0; text-transform: uppercase; font-weight: bold; text-overflow: clip; white-space: nowrap; }
.right { float: right; padding-right: 5px; }
.left { float: left; padding-left: 5px; }
.marquee { -moz-animation-duration: 4s; -webkit-animation-duration: 4s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; font-family: Expansiva !important; font-size: 16px; }
@-moz-keyframes slidein {
  from { margin-left: 30%; width: 100% }
  50% { margin-left: 25%; width: 75%; }
  to { margin-left: 0%; width: 50%; }
}
@-webkit-keyframes slidein {
  from { margin-left: 30%; width: 100% }
  50% { margin-left: 25%; width: 75%; }
  to { margin-left: 0%; width: 50%; }
}

/*Horisontal Mega Menu*/
.yamm-content .accordion  .accordion-body { padding: 0px; }
.yamm-content .accordion  .accordion-inner { padding: 0px; }
.yamm-content .accordion  .accordion-heading .accordion-toggle { padding: 0px; font-weight: bold; color: #fff; }
.yamm-content .accordion  .accordion-heading { background-color: #000; }

/*Vertical Mega Menu*/
#menumodal .accordion-body { max-height: 340px; overflow-y: scroll; background-color: #fff; }
#menumodal .accordion-heading { background-color: #fff; font-weight: bold; }
#menubackdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #000000; opacity: 0.75 }
ul .dropdown-menu { max-height: 600px; overflow-y: scroll; }
.btn[disabled] { color: #868686 !important; background-color: #eeeeee !important; background-image: none; }

/* 
.btn-default {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #51a351;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
color: #ffffff;
background-color: #51a351;
*background-color: #499249;
}
.btn-default:active,
.btn-default.active {
background-color: #408140;
} */
.form-actions { text-align: center; }
.form-horizontal .form-actions { padding-left: 0px !important; }
.clocktime { margin-left: 5px }
.accordion { margin-bottom: 0px !important; }
.btn-orange { background-color: hsl(36, 100%, 40%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffad32", endColorstr="#cc7a00"); background-image: -khtml-gradient(linear, left top, left bottom, from(#ffad32), to(#cc7a00)); background-image: -moz-linear-gradient(top, #ffad32, #cc7a00); background-image: -ms-linear-gradient(top, #ffad32, #cc7a00); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffad32), color-stop(100%, #cc7a00)); background-image: -webkit-linear-gradient(top, #ffad32, #cc7a00); background-image: -o-linear-gradient(top, #ffad32, #cc7a00); background-image: linear-gradient(#ffad32, #cc7a00);  /*border-color: #cc7a00 #cc7a00 hsl(36, 100%, 35%);*/ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #fff !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); -webkit-font-smoothing: antialiased; }
.btn-silver { background-color: #F5F5F5; background-repeat: repeat-x; background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #333333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); }

/*
 * Bootstrap Grid System without space
 *
 * Overwrite Bootstrap grid system, removing margin
 * Usage : 
 * Simple add no-space class with row-fluid
 * <ul class="row-fluid no-space"> ... </ul>
 */
.row-fluid.no-space [class*="span"] { margin-left: 1%; *margin-left: -0.06944%; }
.row-fluid.no-space [class*="span"]:first-child { margin-left: 0; }
.row-fluid.no-space .controls-row [class*="span"] + [class*="span"] { margin-left: 1%; }
.row-fluid.no-space .span12 { width: 99.99999999999999%; *width: 99.93055555555554%; }
.row-fluid.no-space .span11 { width: 91.66666666666666%; *width: 91.59722222222221%; }
.row-fluid.no-space .span10 { width: 83.33333333333331%; *width: 83.26388888888887%; }
.row-fluid.no-space .span9 { width: 74.99999999999999%; *width: 74.93055555555554%; }
.row-fluid.no-space .span8 { width: 66.66666666666666%; *width: 66.59722222222221%; }
.row-fluid.no-space .span7 { width: 58.33333333333333%; *width: 58.263888888888886%; }
.row-fluid.no-space .span6 { width: 49.99999999999999%; *width: 49.93055555555555%; }
.row-fluid.no-space .span5 { width: 41.66666666666666%; *width: 41.597222222222214%; }

/*.row-fluid.no-space .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}*/
.row-fluid.no-space .span4 { width: 32.66666666666666%; *width: 32.597222222222214%; }
.row-fluid.no-space .span3 { width: 24.999999999999996%; *width: 24.930555555555554%; }
.row-fluid.no-space .span2 { width: 16.666666666666664%; *width: 16.59722222222222%; }
.row-fluid.no-space .span1 { width: 8.333333333333332%; *width: 8.263888888888888%; }
.row-fluid.no-space .offset12 { margin-left: 99.99999999999999%; *margin-left: 99.8611111111111%; }
.row-fluid.no-space .offset12:first-child { margin-left: 99.99999999999999%; *margin-left: 99.8611111111111%; }
.row-fluid.no-space .offset11 { margin-left: 91.66666666666666%; *margin-left: 91.52777777777777%; }
.row-fluid.no-space .offset11:first-child { margin-left: 91.66666666666666%; *margin-left: 91.52777777777777%; }
.row-fluid.no-space .offset10 { margin-left: 83.33333333333331%; *margin-left: 83.19444444444443%; }
.row-fluid.no-space .offset10:first-child { margin-left: 83.33333333333331%; *margin-left: 83.19444444444443%; }
.row-fluid.no-space .offset9 { margin-left: 74.99999999999999%; *margin-left: 74.8611111111111%; }
.row-fluid.no-space .offset9:first-child { margin-left: 74.99999999999999%; *margin-left: 74.8611111111111%; }
.row-fluid.no-space .offset8 { margin-left: 66.66666666666666%; *margin-left: 66.52777777777777%; }
.row-fluid.no-space .offset8:first-child { margin-left: 66.66666666666666%; *margin-left: 66.52777777777777%; }
.row-fluid.no-space .offset7 { margin-left: 58.33333333333333%; *margin-left: 58.19444444444444%; }
.row-fluid.no-space .offset7:first-child { margin-left: 58.33333333333333%; *margin-left: 58.19444444444444%; }
.row-fluid.no-space .offset6 { margin-left: 49.99999999999999%; *margin-left: 49.86111111111111%; }
.row-fluid.no-space .offset6:first-child { margin-left: 49.99999999999999%; *margin-left: 49.86111111111111%; }
.row-fluid.no-space .offset5 { margin-left: 41.66666666666666%; *margin-left: 41.52777777777777%; }
.row-fluid.no-space .offset5:first-child { margin-left: 41.66666666666666%; *margin-left: 41.52777777777777%; }
.row-fluid.no-space .offset4 { margin-left: 33.33333333333333%; *margin-left: 33.19444444444444%; }
.row-fluid.no-space .offset4:first-child { margin-left: 33.33333333333333%; *margin-left: 33.19444444444444%; }
.row-fluid.no-space .offset3 { margin-left: 24.999999999999996%; *margin-left: 24.86111111111111%; }
.row-fluid.no-space .offset3:first-child { margin-left: 24.999999999999996%; *margin-left: 24.86111111111111%; }
.row-fluid.no-space .offset2 { margin-left: 16.666666666666664%; *margin-left: 16.52777777777778%; }
.row-fluid.no-space .offset2:first-child { margin-left: 16.666666666666664%; *margin-left: 16.52777777777778%; }
.row-fluid.no-space .offset1 { margin-left: 8.333333333333332%; *margin-left: 8.194444444444443%; }
.row-fluid.no-space .offset1:first-child { margin-left: 8.333333333333332%; *margin-left: 8.194444444444443%; }
.control-group { margin-bottom: 1px !important; }
.well { min-height: 20px; padding: 4px; margin-bottom: 0px; background-color: #F0E3E3; border: 1px solid #C3A9A9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/* styling navigation tabs to suit on .well by nanda*/
ul.nav-tabs.nav-well { border-bottom: 0px; margin-bottom: 0; border-bottom-color: #FFF; }
ul.nav-tabs.nav-well li a {  /*border: 1px solid #F3CD08;*/
border-bottom-color: #FFF; border: 1px solid #C3A9A9; }
ul.nav-tabs.nav-well li a:hover {  /*border: 1px solid #F3CD08;*/
border: 1px solid #C3A9A9; border-bottom-color: #FFF; }
ul.nav-tabs.nav-well li.active { position: relative; z-index: 11; }
ul.nav-tabs.nav-well li.active a {  /*border: 1px solid #F3CD08;
      background-color: #FFF9DB;
      border-bottom-color: #FFF9DB;*/
background-color: #F0E3E3; border: 1px solid #C3A9A9; border-bottom-color: #F0E3E3; font-weight: bold; }
ul.nav-tabs.nav-well li.active a:hover {  /*border: 1px solid #F3CD08;
      background-color: #FFF9DB;
      border-bottom-color: #FFF9DB;*/
background-color: #F0E3E3; border: 1px solid #C3A9A9; border-bottom-color: #F0E3E3; font-weight: bold; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear: left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl { direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt { float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

/*top menu bootstrap3 by nova*/
.navbar-nav>li>a { padding-top: 5px; padding-bottom: 5px; }
#topmenu { margin-top: -30px; }
#topmenu.fixed { margin-top: 0; }
.right-align { text-align: right; }
.center-align { text-align: center; }
.page-title { font-size: 25px !important; }
.input-group-btn>.btn { padding: 7px 12px; }
.dataTables_wrapper .dataTables_processing { height: 100px; background: rgba(255, 255, 255, .8) url('../img/spinner-box.gif') center center no-repeat; background-position-y: 30px; background-size: 80px auto; }
div.wrapper-judul { background-color: #333; color: #FFF; margin: 0px; text-align: left; }
#topNotif { width: 98%; margin: 0 auto; right: 0; left: 0; padding: 5px; }
#judulTopNotif { font-size: 20px; padding: 5px 0 2px 0; margin: 0; }
.text-pulse { animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; }
#jumbotron .logo-header-container { display: flex; height: 90px; align-items: center; justify-content: flex-end; gap: 10px; }
#jumbotron .logo-on-header { height: 100%; max-height: 100%; }