﻿/* -----------------------------------------
   EGP Styles
   2015

Palette: 
blue: 199cdf
orange: f5a230
red: ef3f33
md gray: b4bcc2
dk gray: 878e93

----------------------------------------- */



/* Shared ------------------------------- */

body,
a,
select,
.top-bar-section ul li > a,
.pricing-table .title, .pricing-table .price,
.tabs dd > a, .tabs .tab-title > a,
.side-nav, .side-nav li.active > a:first-child:not(.button),
.accordion .accordion-navigation > a, .accordion dd > a,
h1, h2, h3, h4, h5, h6, li, span, div, ul,
.sub-nav li, 
.label 
{font-family:Roboto, Arial, Helvetica, sans serif; font-weight:400; color:#474747}

body {background:#000}
button, .button {font-family:Roboto, Arial, Helvetica, sans serif; font-weight:700; font-size:.9rem}

h1 {font-size:2.5rem; }
h2 {font-size:2.1rem; }
h1, h2, h3, h4, h5, h6, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-weight:700}

a {color:#199cdf; text-decoration:none;}
a:hover {color:#14a9f9;}
a {outline: 0;}
a:focus {border:1px dotted #199cdf;}

input {color:#515351 !important;}
input.button {color:#FFF !important;}
input:focus {}

code {font-size:smaller !important;}

.bg-white {background:#fff}
.antialiased {-moz-osx-font-smoothing: grayscale;}
.black {background-color: #000; border-color: #999; color: #efefef;}
.black:hover, .black:focus {background-color: #b9b9b9; }

.blue {background-color: #199cdf; border-color: #1294da; color: #fff;}
.blue:hover, .blue:focus {background-color: #1082c0; }

.orange {background-color:#f5a230; border-color:f5a230; color:#fff;}
.orange:hover, .orange:focus {background-color:#e2962e;}

.text-orange {color:#f5a230}
.text-dkgray {color:#878e93}

.italic {font-weight:400; font-style:italic; color:inherit}

/* Help -------------------------------- */
/* Quick -------------------------------- */

.pad-top-30 {padding:30px 0 0 0;}
.pad-tb-30 {padding:30px;}
.pad-tb-50 {padding:50px 0;}
.pad-tb-75 {padding:75px 0;}
.pad-tb-100 {padding:100px 0;}
.pad-b-100 {padding:0 0 100px 0;}

.margin-top-25 {margin-top:25px;}
.margin-top-50 {margin-top:50px;}
.margin-top-100 {margin-top:100px;}

.uppercase {text-transform:uppercase;}

.bold {font-weight:700;}
.text-white {color:#fff;}
hr.dark {border-top: 1px solid #333;}
hr.reverse {border-bottom: 1px solid #fff; margin:5% 0;}

.intro {font-weight:500; font-size:1rem}

.grayscale {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
}

.grayscaleoff {
    filter: none;
    -webkit-filter: grayscale(0%);
}


.underscore {border-bottom:5px solid #f5a230}
.full-width {width:100%}

.box-hilight-help {
    height:215px;
    line-height: 0;
    border: 4px solid #FFF;
    max-width: 100%;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    transition: all 200ms ease-out 0s;
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}
.box-hilight {
    line-height: 0;
    display: inline-block;
    border: 4px solid #FFF;
    max-width: 100%;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    transition: all 200ms ease-out 0s;
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}
.boxTrainingMaterials {
   width:450px;
   height:200px
}
.blueLine {
    height: 1px;
    border-width: 0;
    color: gray;
    background-color: #1976d2;
}

.blueHeader {
    color: #1976d2;
    padding: 10px;
    font-size: 22px;
    font-weight:600;
}

.videoHeader {
    font-size: 12px;
    font-weight: bold;
    padding-top: 5px;
    display: inherit;
}

.videoContainer {
    display: flex;
    flex-wrap: wrap;
}

.rowWithPadding {
    padding-top: 30px;
    padding-bottom: 30px
}
.rowHelp {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 82.5rem
}

.transcriptText {
    font-size: 10px;
    display: block;
 }


.lnk-resource ul li {
    line-height: 1.9em;
    font-size: 1rem;
}
.alpha60 {background-color: rgba(0,0,0,0.6) !important;}
.label-fix {display:inline !important;}

/* Screen Reader ------------------------ */

.reader-only {
	position:absolute;
	top:-999999em;
	left:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

fieldset.fake {border:none; padding:0; margin:0;}


/* User-Bar ----------------------------- */

.user-bar {background-color:#000; border-bottom:1px solid #333; padding:5px 0px;  font-size:.8rem; font-weight:700;}
.user-bar a {margin-left:25px; text-decoration:none;color:#b4bcc2; }
.user-bar span {color:#f5a230;}

/* Top-Bar ------------------------------ */

.top-bar, .top-bar .name {height:70px;}
.contain-to-grid { border-bottom:1px solid #333}
.top-bar-section ul li a {color:#fff;  font-weight:700;}
.contain-to-grid, .top-bar, .top-bar .name h1 a, .top-bar-section ul li a {background:#000 !important; text-decoration:none; text-transform:uppercase;}



/* Hero --------------------------------- */

#hero p, #hero h1, #hero h2, #hero h3 {color:#fff;}
#hero .panel {padding:15px 15px 10px;}
#hero .panel, #hero .panel p {background:#fff; color:#333; font-size:.9rem;}

#hero #systemAlert {color:#FFF;}
#hero .status {text-transform:uppercase; font-weight:700; color:#f5a230}


/* Tools -------------------------------- */

#tools {background:#fff;}
#tools p {}
.tool {padding:0px 10px;}
.tool img {border-bottom:5px solid #fff}
.tool .underscore {border-bottom:5px solid #f5a230 !important}

.reveal-modal-bg{position:fixed;}
.reveal-modal{position:fixed;}


/* Data ------------------------------- */

.row.data-table-row-container {
    max-width: 1800px;
    padding: 0 24px;
}

.ie9 table#fire-data {display:none !important;}

.data td {font-weight:normal; font-size:13px !important;}

table.KeyTable th.focus, table.KeyTable td.focus {outline: 2px solid #199cdf; outline-offset: -2px; background:#fff;}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {background-color: #efefef !important;}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {background-color: #abb9d3;}
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {background-color: #ceeeff !important;}
table.datatable tr td:last-child { word-break: break-all; }
table.datatable tr td { max-width: 500px; }


/* Launchpad ------------------------------- */

#launchpad h1 {font-size:1.2rem; color:#787878;}
#launchpad h2 {font-size:1.9rem;}
#launchpad h2 span.label {position:relative; top:-5px}
#launchpad p, #launchpad li {font-size:.95rem; font-weight:normal}
.bg-gray-grid {background:url('../Assets/Images/bg_grey_grid.png') repeat; padding:20px 0 0 0}

#launchpad #systemAlert {color:#;}
#launchpad .status {text-transform:uppercase; font-weight:700; color:#f5a230}
#launchpad .tool-launch .button {width:250px}

.cont-tool li {padding-bottom:0px;}
.bt-tool {width:100%; padding:10px;}
.bt-tool div {width:100%; color:#fff; font-size:.9rem;}
.cont-tool li a div {position: relative; top: 50%; transform: translateY(-50%);} /*vertical-center fake-out*/

.cont-stat p {position: relative; top: 50%; transform: translateY(-50%);}

/*deprecated by customer
.bt-tool { background:rgba(255,255,255,0.4); width:100%; border:1px solid #fff; color:#474747 !important;}
.bt-fireglobe {background:rgba(255,255,255,0.4) url('../Assets/Images/bt_fg.png') center 5px no-repeat; background-size:70px}
.bt-sa {background:rgba(255,255,255,0.4)  url('../Assets/Images/bt_sa.png') center 5px no-repeat; background-size:70px}
.bt-samobile {background:rgba(255,255,255,0.4)  url('../Assets/Images/bt_samobile.png') center 5px no-repeat; background-size:70px}
.bt-risc {background:rgba(255,255,255,0.4)  url('../Assets/Images/bt_risc.png') center 5px no-repeat; background-size:70px}
*/

.listWithOutBullets {
   list-style-type: none;
}

 .listWithOutBullets li {
        margin: 5px;
  }

.sideByside {
    display: flex;
    flex-wrap: wrap;
}
.sideByside li{
     margin-right:40px;  
}

.image-divider {
    margin-right: 40px;
}

.headerSectionLink {
    font-weight: bold;
    text-decoration: underline;
}

.accordion {
    background-color: #ffff;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
  }

.accordion:hover, .accordion:focus {
   background-color: #ffff;
 }

.active, .accordion:hover {
   background-color: #DDD;
 }

.accordion:after {
        content: '\002B';
        color: #199cdf;
        font-weight: bold;
        font-size:25px;
        float: right;
        margin-right: 50px;
  }

.active:after {
    content: "\2212";
}
.panelSection {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}
/* Help --------------------------------- */

ul.faq-list {margin-bottom:0;}
hr.faq-divider {height:10px; border:0; border-bottom:1px solid #DDD;}
#faq-container img {
    margin-bottom: 1.25rem
}

/* Validation --------------------------- */

span.error[style*='inline'] {display:block !important; margin-top:-17px !important;}
span.error.fix {margin-top:-17px !important;}
.required {font-size:1.2rem; color:#ef3f33}


/* Frames ------------------------------- */

.frame iframe {width:100%;}
.frame#contact iframe {min-height:935px;}
.frame#account iframe {min-height:1155px;}


/* Foot --------------------------------- */

#foot {padding-top:50px; background: rgba(0,0,0,1);}
#foot ul {display:inline-block;}
.licensing {font-size:.7em; color:#fff;}

