/* ==========================================================================
   Author's custom styles
   ========================================================================== */
a.btn {
    margin: 5px;
    margin-top: 10px;
    font-weight: 300;
}

.bs-callout-info {
    background-color: #ffffff;
    border-color: #d0e3f0;
}

.bs-callout {
    margin: 5px 0;
    padding: 10px 20px 10px 10px;
    border-left: 5px solid #ff0000;
    border-radius: 5px;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.pleaseWait {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .7);
}

.pleaseWait #pleaseWait-body {
    width: 200px;
    height: 100px;
    padding: 1%;
    background-color: #f5f5f5;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px;
}

.pleaseWait-text {
    padding-top: 65px;
}

html {
    height: 100%;
}

body {
    color: black;
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 400;
    background-color: #223358;
    background-attachment: fixed;
}

.registrationBody {

    position: relative;
    padding: 10px;

}

.titlePanel {
    top: 0;
    left: 0;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.mainPanel {
    color: black;
    width: 94%;
    margin-left: auto;
    margin-right: auto;

}

.thumbnail {
    background-color: white;
    margin: 30px;
    padding: 25px;
    border: solid cornflowerblue 3px;
    height: 180px;
    width: 180px;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    position: relative;
    -webkit-box-shadow: 0 8px 6px -6px #222;
    -moz-box-shadow: 0 8px 6px -6px #222;
    box-shadow: 0 10px 35px -1px #222;

}

.footerLogin, .footerLogin a {
    color: white;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    padding-top: 20px;
}

/* Menu Link after Login*/
#portalNav a:link {
    color: white;
    margin-top: 8px;
    margin-left: 20px;
    font-size: 18px;

}

/* Portal Icons*/
.tileImage {
    width: 140px;
    height: 140px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    zoom: 0.75;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;

}

.tileLabel {
    margin-top: 2px;
    text-align: center;
    font-size: 14px;
    color: black;
    font-weight: bold;
}

.tile {
    height: 70px;
    width: 100px;
    color: white;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
}

#welcome {
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

blockquote {
    font-size: small;
}

.asteriskMessage {
    color: #ffffff;
}

.logos {
    text-align: center;
}

.logo {
    margin: 15px;
    border-radius: 30px;
    display: inline-block;
    height: auto;
    max-width: 100%;
    padding: 4px;
    line-height: 1.428571429;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.img-logo {
    width: 50px;
    height: 50px;
    zoom: 0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
}

.panel, .alert, .btn {
    border-radius: 2px;
}

.system-message {
    font-weight: bold

}

.system-message-blue {
    color: #0E53a7;

}

.system-message-red {
    color: #e90038;
}

.system-message-darkred {
    color: #a65600;

}

.system-message-message {
    margin-right: 20px;
    padding-bottom: 1px;

}

.top-buffer {
    margin-top: 10px;
}

.bottom-buffer {
    margin-bottom: 10px;
}

.left-buffer {
    margin-left: 10px;
}

.right-buffer {
    margin-right: 10px;
}

.input-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.whiteLink {
    color: #ffffff;
}

.whiteLink a {
    color: #ffffff;
}

/*.navbar*/
/*{*/
/*border: 0px;*/
/*font-family: "Helvetica Neue", sans-serif;*/
/*font-size: large;*/
/*background-image: none;*/
/*background-color: #223358;*/
/*background-repeat: repeat-x;*/
/*webkit-box-shadow: none;*/
/*box-shadow: none;*/
/*filter:none;*/
/*}*/
/*.navbar-default .navbar-nav>li>a*/
/*{*/
/*color: #ffffff;*/
/*}*/
.brandLogo {
    /*margin-right: 30px;*/
    /*position: fixed;*/
}

.wawfVersionAuth {
    font-size: 1.4em;
    position: absolute;
    bottom: 40px;
    left:30px;
    color: #fff;
}

.wawfVersionHelp {
    font-size: 1.4em;
    position: absolute;
    bottom: 20px;
    left:40px;
    color: #fff;
}

.wawfVersionUnauth {
    font-size: 1.4em;
    position: absolute;
    bottom: -35px;
    left:30px;
    color: #fff;
}
.wbt-search-container {
    display: inline;
    float: none;
}
.wbt-search-container .input-group {
    margin-left: 15px;
    margin-right: 15px;
}
@media (max-width: 992px) {
    #wbt-search {
        max-width: none !important;
        width: 100%;
    }
}
#wbt-search, #wbt-search-ui-search-input {
    color: #333;
    display: inline;
    float: none;
    max-width: 350px;
    /* width: auto; */
    padding-top: 13px;
    padding-bottom: 16px;
    z-index: 1;
    border: 2px transparent;
    background: #fff 8px 15px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG11AABzoAAA%2FN0AAINkAABw6AAA7GgAADA%2BAAAQkOTsmeoAAAESSURBVHjajNCxS9VRGMbxz71E4OwgoXPQxVEpXCI47%2BZqGP0LCoJO7UVD3QZzb3SwcHB7F3Uw3Zpd%2FAPCcJKG7Dj4u%2FK7Pwp94HDg5Xyf5z1Pr9YKImKANTzFXxzjU2ae6qhXaxURr%2FAFl9hHDy%2FwEK8z89sYVEp5gh84wMvMvGiSJ%2FEV85jNzLMR1McqfmN5BEBmnmMJFSvtpH7jdJiZv7q7Z%2BZPfMdcF6rN%2FT%2F1m2LGBkd4HhFT3dcRMY2FpskxaLNpayciHrWAGeziD7b%2BVfkithuTk8bkGa4wgWFmbrSTZOYeBvjc%2BucQj%2FEe6xHx4Taq1nrnKaW8K6XUUsrHWuvNevdRRLzFGwzvDbXAB9cDAHvhedDruuxSAAAAAElFTkSuQmCC);
}
#wbt-search:-ms-input-placeholder {
    color: #777777;
}

.img-overlay {
    position: relative;
    max-width: 500px;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #428bca;
    border-bottom-color: #428bca;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #87ceeb;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #05588e;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    color: white
}

#portal-system-messages {
    margin-top: 70px;
}

#coloredTables {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#coloredTables td, #coloredTables th {
    border: 1px solid #ddd;
    vertical-align: top;
    padding: 8px;
}

#coloredTables tr:nth-child(even) {
    background-color: #FFF;
}

#coloredTables tr:nth-child(odd) {
    background: #E8FFFF
}

#coloredTables tr:hover {
    background-color: #ddd;
}

#coloredTables th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4F81BD;
    color: white;
}

.image-square > tbody > tr > td:nth-child(2) img, .image-square > tbody > tr > td:nth-child(3) img, .image-square > tbody > tr > td:nth-child(4) img, .image-square > tbody > tr > td:nth-child(5) img{
    height: 30px;
    width: auto;
}

.panel-primary {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;

}

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.panel-resizable {
    resize: both;
    overflow: auto
}

a {
    color: #223358;
}

.help-title {
    color: black;
    padding-left: 20px;
}

.foot {
    padding-top: 20px;
    color: white;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;

}

.foot a {
    color: white;
}

.footer-col {
    list-style-type: none;

}

.footer-col-title {
    padding-left: 30px;
    padding-bottom: 10px;
}

.footer-col-img {
    margin-right: 10px;
}

.ib {
    display: inline-block;
}

.highlight {
    padding: 9px 14px;
    margin-bottom: 14px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
}

/*!*start Sprite CSS for images*!*/
/*.pieeLogoWhite {*/
/*background: url(../img/PIEE_background_transparency.png) no-repeat;*/
/*}*/

/*.pieeLogoWhite {*/
/*background-position: 0 -3px;*/
/*width: 350px;*/
/*height: 90px;*/
/*}*/

/*start Sprite CSS for images*/
.appStore, .googlePlay, .teda, .tiuid, .tcloseout, .tcdrs, .tminv, .tmipr, .twawf, .wawf, .eda, .iuid, .closeout, .mipr, .myInvoice, .dla, .webBasedTraining, .cdrs, .gfp, .sprs, .jam, .tjam, .tgfp, .cls, .tcls, .tppml, .tsolicitation, .solicitation, .tsprs, .piee, .tpiee, .parrot, .tparrot, .sprs, .tsprs, .ppml, .tppml, .pcm, .tpcm, .conit, .tconit, .twbt, .usbank, .tusbank, .cedms, .tcedms {
    background: url(../../portal/img/sprites.png) no-repeat;
}

.appStore {
    background-position: -498px -434px;
    width: 40px;
    height: 40px;
}

.googlePlay {
    background-position: -599px -434px;
    width: 35px;
    height: 38px;
}

.wawfTitleLogoEBusinessWhite {
    width: 270px;
    height: auto;
}


.teda {
    background-position: -290px -348px;
    width: 50px;
    height: 50px;
}

.tiuid {
    background-position: -364px -350px;
    width: 50px;
    height: 50px;
}

.tminv {
    background-position: -500px -349px;
    width: 50px;
    height: 50px;
}

.tmipr {
    background-position: -435px -349px;
    width: 50px;
    height: 50px;
}


.twawf {
    background-position: -220px -347px;
    width: 50px;
    height: 50px;
}

.tcloseout {
    background-position: -556px -350px;
    width: 50px;
    height: 50px;
}

.tcdrs {
    background-position: -612px -350px;
    width: 50px;
    height: 50px;
}


.tgfp {
    background-position: -783px -348px;
    width: 50px;
    height: 50px;
}

/* PARROT Icon */
.parrot
{
    background-position: -1826px 0px;
    width: 140px;
    height: 140px;
}
/* PARROT Login Icon */
.tparrot
{
    background-position: -1421px -348px;
    width: 50px;
    height: 50px;
}

/*Tiny CLS Sprite*/
.tcls {
    background-position: -834px -348px;
    width: 50px;
    height: 50px;
}

/*Tiny wbt Sprite*/
.twbt {
    background-position: -1100.0000305175781px -348px;
    width: 50px;
    height: 50px;
}

/*Tiny SPRS Sprite*/
.tsprs {
    background-position: -1045px -350px;
    width: 50px;
    height: 50px;
}

/*SPRS Sprite*/
.sprs {
    background-position: -1282px 0;
    width: 140px;
    height: 140px;
}


.tsolicitation {
    background-position: -993px -352px;
    width: 52px;
    height: 50px;
}

/*Tiny SPRS Sprite*/
.tsprs {
    background-position: -1045px -350px;
    width: 50px;
    height: 50px;
}

.wawf {
    background-position: 0 -3px;
    width: 140px;
    height: 140px;
}

.eda {
    background-position: -285px -4px;
    width: 140px;
    height: 140px;
}

.iuid {
    background-position: -432px 0;
    width: 140px;
    height: 140px;
}

.mipr {
    background-position: 0 -148px;
    width: 140px;
    height: 140px;
}

.myInvoice {
    background-position: -286px -146px;
    width: 140px;
    height: 140px;
}

.closeout {
    background-position: -580px -1px;
    width: 140px;
    height: 140px;
}

.dla {
    background-position: -403px -407px;
    width: 60px;
    height: 73px;
}

/*Web based Training Sprite*/
.webBasedTraining {
    background-position: -582px -144px;
    width: 138px;
    height: 140px;
}

.cdrs {
    background-position: -732px 0px;
    width: 140px;
    height: 140px;
}

.gfp {
    background-position: -870px -142px;
    width: 140px;
    height: 140px;
}

/*CLS Sprite*/
.cls {
    background-position: -1009px -143px;
    width: 140px;
    height: 140px;
}

.solicitation {
    background-position: -1149px -144px;
    width: 140px;
    height: 140px;
}

/*SPRS Sprite*/
.sprs {
    background-position: -1282px 0;
    width: 140px;
    height: 140px;
}

/*JAM Icon*/
.jam {
    background-position: -1284.0000305175781px -143px;
    width: 140px;
    height: 140px;
}

/*JAM Login Icon*/
.tjam {
    background-position: -1100.0000305175781px -348px;
    width: 50px;
    height: 50px;
}

/*PIEE Icon*/
.piee {
    background-position: -1420.00px -143px;
    width: 140px;
    height: 140px;
}

/*PIEE Login Icon*/
.tpiee {
    background-position: -1154px -348px;
    width: 50px;
    height: 50px;
}

.pcm {
    background-position: -1557px 0px;
    width: 140px;
    height: 140px;
}

.tpcm {
    background-position: -1312px -348px;
    width: 50px;
    height: 50px;
}

/* US Bank EAS Icon */
.usbank {
    background-position: -1693px 0px;
    width: 140px;
    height: 140px;
}

.tusbank {
    background-position: -796px -427px;
}

/* CONIT Icon */
.conit {
    background-position: -1554px -142px;
    width: 140px;
    height: 140px;
}

/* CONIT Login Icon */
.tconit {
    background-position: -1262px -346px;
    width: 50px;
    height: 50px;
}

/*end Sprite CSS for images*/

.table-primary {
    background-color: dodgerblue;
}

.page-validations {
color: #B55100;
font-weight: bold;
font-style: italic
}

.page-parameters {
color: #763A96;
font-weight: bold;
font-style: italic
}

.page-section-container {
box-shadow: 5px 6px #808080;
background-color: #E8FFFF;
padding: 15px;
border-radius: 25px;
}

.page-section-container-alt {
    box-shadow: 5px 6px #808080;
    background-color: #E8FFEE;
    padding: 15px;
    border-radius: 25px;
}

.page-header-section-container {
    box-shadow: 5px 6px #808080;
    background-color: #5B9BD5;
    padding: 5px 15px;
}

.page-header-section-container-center {
    box-shadow: 5px 6px #808080;
    background-color: #5B9BD5;
    padding: 5px 15px;
    text-align: center
}
.page-header-section-container-center-alert {
   box-shadow: 5px 6px #808080;
   background-color: #d83d2d;
   padding: 5px 15px;
    text-align: center;
    color: #FFFFFF;
}

.page-container {
    padding: 2%;
    width: 100%;
    background-color: #ffffff;
}

.page {
    padding: 3%;
    border: 1px solid #2c2c2c;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15), 0 0 2px rgba(0, 0, 0, .1);
    border-radius: 2px;
    /*-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);*/
    /*-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);*/
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);*/
}

.page-bottom {
    margin-bottom: 20px;
    font-size: 10px;
    padding-left: 10px;
    margin-top: -30px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.wrapText {
    word-wrap: break-word;
    white-space: normal;
}

.helpBtn {
    margin-top: 5px;
}

.closeBtn {
    margin-top: 5px;
}

.homePageError {
    margin-left: 5%;
    margin-right: 5%;
}

.bigModal {
    width: 90%; /* desired relative width */
    left: 5%; /* (100%-width)/2 */
    /* place center */
    margin-left: auto;
    margin-right: auto;
}

.cert-dialog {
    z-index: 1050;
    width: 60%;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}

.overflow-auto {
    overflow: auto;
}

.overflow-auto {
    overflow: auto;
}

.margin-left {
    margin-left: 10px;
}

.form-control[disabled], .form-control[read-only] {
    color: #000000;
}

/* IE 9 specific hack. Disabled text color cannot be changed in this version so we will change the background instead. Looks like an error on our end but it is readable in IE9*/
:root .form-control[disabled] {
    background: white \0;
}

fieldset.grouping-border {
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border: 2px solid white;
    width: auto;
    /*display: inline;*/
    align-content: center;
}

legend.grouping-border {
    color: white;
    width: auto;
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
}

div.grouping-border {
    text-align: center;
    float: none;
    display: inline-table;
}

.accordion-option {
    float: right;
    clear: both;
}

.accordion-option .title {
    font-size: 20px;
    font-weight: bold;
    float: left;
    padding: 0;
    margin: 0;
}

.accordion-option .toggle-accordion {
    float: right;
    font-size: 16px;
    /*color: #6a6c6f;*/
    color: #000000;
}


.navbar-brand {
    height: auto;
}

/*!**/
    /*DEMO STYLE*/
/**!*/

/*@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";*/
/*body {*/
    /*font-family: 'Poppins', sans-serif;*/
/*}*/

/*p {*/
    /*font-family: 'Poppins', sans-serif;*/
    /*font-size: 1.1em;*/
    /*font-weight: 300;*/
    /*line-height: 1.7em;*/
/*}*/

/*#sidebar a,*/
/*#sidebar a:hover,*/
/*#sidebar a:focus {*/
    /*color: inherit;*/
    /*text-decoration: none;*/
    /*transition: all 0.3s;*/
/*}*/

/*.navbar {*/
    /*position: fixed;*/
    /*padding: 15px 10px;*/
    /*background: #fff;*/
    /*border: none;*/
    /*border-radius: 0;*/
    /*margin-bottom: 40px;*/
    /*box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);*/
/*}*/

/*.navbar-btn {*/
    /*box-shadow: none;*/
    /*outline: none !important;*/
    /*border: none;*/
/*}*/

/*.line {*/
    /*width: 100%;*/
    /*height: 1px;*/
    /*border-bottom: 1px dashed #ddd;*/
    /*margin: 40px 0;*/
/*}*/

/*!* ---------------------------------------------------*/
    /*SIDEBAR STYLE*/
/*----------------------------------------------------- *!*/

/*.wrapper {*/
    /*display: flex;*/
    /*width: 100%;*/
    /*align-items: stretch;*/
    /*!*margin-left:-15px;*!*/
/*}*/

/*#sidebar {*/
    /*position: fixed;*/
    /*!*min-width: 225px;*!*/
    /*!*max-width: 225px;*!*/
    /*min-width: 15%;*/
    /*max-width: 17%;*/
    /*top: 12rem;*/
    /*bottom: 0;*/
    /*!*margin-left: -40px;*!*/
    /*background: #223358;*/
    /*color: #fff;*/
    /*transition: all 0.3s;*/
    /*overflow-y: auto;*/
/*}*/

/*#sidebar.active {*/
    /*margin-left: -250px;*/
/*}*/

/*#sidebar .sidebar-header {*/
    /*padding-bottom: 10px;*/
    /*background: #223358;*/
/*}*/

/*#sidebar ul.components {*/
    /*padding: 5px 0;*/
    /*border-bottom: 1px solid #47748b;*/
/*}*/

/*#sidebar ul p {*/
    /*color: #fff;*/
    /*padding: 10px;*/
/*}*/

/*#sidebar ul li a {*/
    /*padding: 10px;*/
    /*font-size: 1.1em;*/
    /*display: block;*/
/*}*/

/*#sidebar ul li a:hover {*/
    /*color: #7386D5;*/
    /*background: #fff;*/
/*}*/

/*#sidebar ul li.active > a,*/
/*a[aria-expanded="true"] {*/
    /*!*color: #fff;*!*/
    /*!*background: #6d7fcc;*!*/
/*}*/

/*a[data-toggle="collapse"] {*/
    /*position: relative;*/
/*}*/

/*.dropdown-toggle::after {*/
    /*display: block;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*right: 20px;*/
    /*transform: translateY(-50%);*/
/*}*/

/*ul ul a {*/
    /*font-size: 0.9em !important;*/
    /*padding-left: 30px !important;*/
    /*background: #6d7fcc;*/
/*}*/

/*ul.CTAs {*/
    /*padding: 20px;*/
/*}*/

/*ul.CTAs a {*/
    /*text-align: center;*/
    /*font-size: 0.9em !important;*/
    /*display: block;*/
    /*border-radius: 5px;*/
    /*margin-bottom: 5px;*/
/*}*/

/*!* ---------------------------------------------------*/
    /*CONTENT STYLE*/
/*----------------------------------------------------- *!*/

/*#content {*/
    /*width: 100%;*/
    /*padding: 20px;*/
    /*min-height: 100vh;*/
    /*transition: all 0.3s;*/
/*}*/

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    /*#sidebar {*/
        /*margin-left: -17%;*/
        /*width: 0;*/
    /*}*/

    /*!*#sidebar.active {*!*/
        /*!*margin-left: 0;*!*/
    /*!*}*!*/

    /*!*#sidebarCollapse span {*!*/
        /*!*display: none;*!*/
    /*!*}*!*/
    /*#container-textwrapper {*/
        /*float: left;*/
        /*!*margin-left: -17%;*!*/
        /*height: 100% !important;*/
        /*width: 100% !important;*/
        /*padding-right: 15px;*/
    /*}*/
    /*#container-sidebarwrapper {*/
        /*float: left;*/
        /*height: 0 !important;*/
        /*width: 0 !important;*/
        /*!*padding-right: 5px;*!*/
    /*}*/

    #img{
        min-width:800px;
        width: auto !important;
        width:800px;
    }

}

.img-box-shadow{
    box-shadow: 10px 10px 5px #808080;
   }

/*.sidebar-sticky {*/
    /*position: -webkit-sticky;*/
    /*position: sticky;*/
    /*top: 48px; !* Height of navbar *!*/
    /*height: calc(100vh - 48px);*/
    /*padding-top: .5rem;*/
    /*overflow-x: hidden;*/
    /*overflow-y: auto; !* Scrollable contents if viewport is shorter than content. *!*/
/*}*/

/*.footer {*/
    /*border-top: 1px solid #989898;*/
    /*position: fixed;*/
    /*bottom: 0;*/
    /*width: 100%;*/
    /*!* Set the fixed height of the footer here *!*/
    /*height: 50px;*/
    /*padding: 3px;*/
    /*background-color: #f5f5f5;*/
    /*vertical-align: middle;*/
    /*z-index: 1000;*/
/*}*/

/*.header {*/
    /*border-top: 1px solid #989898;*/
    /*position: fixed;*/
    /*top: 0;*/
    /*bottom: 11rem;*/
    /*width: 100%;*/
    /*!* Set the fixed height of the footer here *!*/
    /*height: 11rem;*/
    /*padding: 3px;*/
    /*!*margin: 30px;*!*/
    /*background-color: #223358;*/
    /*!*vertical-align: middle;*!*/
    /*z-index: 1000;*/

    /*!*padding: 15px 10px;*!*/
    /*!*border: none;*!*/
    /*!*border-radius: 0;*!*/
    /*!*margin-bottom: 40px;*!*/
    /*!*box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);*!*/

    /*!*position: -webkit-sticky;*!*/
    /*!*position: sticky;*!*/

/*}*/

/*!*#container {*!*/
/*!*!*background-color: #d6d6d6;*!*!*/
/*!*width: 100%;*!*/
/*!*overflow: auto;*!*/
/*!*position: absolute;*!*/
/*!*top: 12rem;*!*/
/*!*bottom: 0;*!*/
/*!*height: auto;*!*/
/*!*}*!*/

/*#container-body {*/
    /*!*background-color: #d6d6d6;*!*/
    /*!*background-color: #55d63c;*!*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*!*padding: 10px;*!*/
/*}*/

/*#container {*/
    /*background-color: #d6d6d6;*/
    /*width: 100%;*/
    /*overflow: auto;*/
    /*position: absolute;*/
    /*top: 12rem;*/
    /*bottom: 0;*/
    /*height: auto;*/
    /*transition: all 0.3s;*/
/*}*/

/*#container-sidebar {*/
    /*padding-right: 17px;*/
/*}*/

/*#container-sidebarwrapper {*/
    /*float: left;*/
    /*height: 100%;*/
    /*width: 17%;*/
    /*!*padding-right: 5px;*!*/
/*}*/


/*#container-text {*/
    /*padding-left: 17px;*/
/*}*/

/*#container-textwrapper {*/
    /*float: left;*/
    /*height: 100%;*/
    /*width: 82%;*/
    /*!*padding-left: 55px;*!*/
/*}*/


/*#container-heading {*/
    /*padding: 10px 15px;*/
    /*border-bottom: 1px solid transparent;*/
    /*border-top-right-radius: 3px;*/
    /*border-top-left-radius: 3px*/
/*}*/





.crumb-trail {
    background-color: #CCD2D8;
    color: #000000;
    list-style: none;
    padding: 0px;
    margin: auto;
    width: fit-content;
}

.breadcrumb {
    /*centering*/
    display: inline-block;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border-radius: 5px;
    text-align: center;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    counter-reset: flag;
}

.breadcrumb p {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 32px;
    line-height: 50px;
    color: white;
    /*need more margin on the left of links to accomodate the numbers*/
    padding: 0 20px 0 40px;
    background: #666;
    background: linear-gradient(#666, #333);
    position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb p:first-child {
    padding-left: 20px;
    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb p:first-child:before {
    left: 14px;
}
.breadcrumb p:last-child {
    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
    padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb p.active, .breadcrumb p:hover{
    background: #333;
    background: linear-gradient(#333, #000);
}
.breadcrumb p.active:after, .breadcrumb p:hover:after {
    background: #333;
    background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb p:after {
    content: '';
    position: absolute;
    top: 0;
    right: -25px; /*half of square's length*/
    /*same dimension as the line-height of .breadcrumb p */
    width: 50px;
    height: 50px;
    /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
    length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
    if diagonal required = 1; length = 1/1.414 = 0.707*/
    transform: scale(0.707) rotate(45deg);
    /*we need to prevent the arrows from getting buried under the next link*/
    z-index: 1;
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: #666;
    background: linear-gradient(135deg, #666, #333);
    /*stylish arrow design using box shadow*/
    box-shadow:
            2px -2px 0 2px rgba(0, 0, 0, 0.4),
            3px -3px 0 2px rgba(255, 255, 255, 0.1);
    /*
        5px - for rounded arrows and
        50px - to prevent hover glitches on the border created using shadows*/
    border-radius: 0 5px 0 50px;
}

/*we dont need an arrow after the last link*/
.breadcrumb p:last-child:after {
    content: none;
}

/*we will use the :before element to show numbers*/
/*.breadcrumb p:before {*/
/*    content: counter(flag);*/
/*    counter-increment: flag;*/
/*    !*some styles now*!*/
/*    border-radius: 100%;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    line-height: 20px;*/
/*    margin: 8px 0;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 30px;*/
/*    background: #444;*/
/*    background: linear-gradient(#444, #222);*/
/*    font-weight: bold;*/
/*}*/


.flat p, .flat p:after {
    background: white;
    color: black;
    transition: all 0.5s;
}
.flat p:before {
    background: white;
    box-shadow: 0 0 0 1px #ccc;
}
.flat p:hover, .flat p.active,
.flat p:hover:after, .flat p.active:after{
    color: white; !important;
    background: #3D67B1;
}