#myModal .video-js {
    position: relative !important;
    margin-left: 10%;
    margin-right: 10%;
    width: 80% !important;
    height: 360px !important;
}

.tpTimerRight {
    font-size: 0.9em;
    text-align: right;
}

.tpTimerLeft {
    font-size: 0.9em;
    text-align: left;
}

.tpWarning {
    color: orange;
}

.tpExpired {
    font-size: 0.9em;
    color: red;
    font-weight: 700;
}

.modal.quarterly-instruction {
    width: 60%; /* respsonsive width */
    margin-left:-30%; /* width/2) */ 
    max-height:85%;
    overflow-y:auto;
}

.modal-body { max-height:100%; height:80%; }
.text-left  { text-align:left}
.text-gray tbody td { color: #737373; }

.navbar .nav > li > a { color:#545454 }
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {  background-color: #e5e5e5; }

.tpNotice {
    font-size: 0.9em;
    padding-top: 3px;
}

.explanation {font-size:0.8em; text-decoration:underline; text-align:right;}
.explanationN {font-size:16px; text-align:left; padding-left:10px; font-weight:700; padding-top:15px}
.explantionDesc {font-size:12px; text-align:left; padding-left:10px; color:#808080}
.explantionwordcount {font-size:12px; text-align:left; padding-left:20px; color:#767676;}
.swotwordcount {font-size:12px; text-align:right; color:#767676; padding-right:20px; display:inline-block}
.swotheader {font-size:16px; font-weight:700; text-align:left; display:inline-block}
.notetinymceinput {margin-right:10px;}

form { margin: 0px; }


/*focus*/

.nav-tabs > .active > a:focus {  background-color: #eee; color }
.btn:focus {
    outline-offset: 2px;
    outline: 5px auto #000;
}
.navbar .nav > .active > a:focus, .navbar .nav > li > a:focus { background:#e7e7e7; }

select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 2px solid #000; }

a:focus {
    outline: 0;
    color: #000;
}
/*end focus*/

.pl-2 { padding-left:2px !important; }
.pr-2 { padding-right: 2px  !important }
.pt-2 { padding-top: 2px !important }
.pb-2 { padding-bottom: 2px !important }
.ml-2 { margin-left: 2px !important }
.mr-2 { margin-right: 2px !important }
.mt-2 { margin-top: 2px !important }
.mb-2 { margin-bottom: 2px !important }



a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}
ul.project a
{
    color: darkslategray;
}
.alert {text-align:justify;}
ul.project h5
{
    margin-top: 1.0em;
}

li div.headword {
    width:7em; min-width:7em;display:inline-block;
}
.avatarname {
    text-align:center;
    font-size: 2em;
    font-weight: bolder;
}
p.justify{ text-align:justify; border-top: none; }
/*p.justify{ text-align:justify; justify:inter-word; border-top: none; }*/

.table td { text-align:right; border-top:none;}
.table th { text-align: right; border-bottom: 2px solid rgb(221, 221, 221);}


th { font-size:1.1em; color: rgb(90,90,90);}
th.left { text-align:left; min-width:180px; }
.rpradio {
    width: 20px;
    display: inline-block;
    vertical-align: top;
}
.rpradio > input[type="radio"], .rpradio > input[type="checkbox"] {margin-top: 0px;}

.rpscript {
    width: 90%;
    display: inline-block;
    text-align: justify;
}
input.changed { border: 1px solid blue; }
input.invalid { border: 2px solid red; }
.dealinput {
    display:inline-block;
    width: 100px;
    min-width: 100px;
}
.dealinput > input{
    margin: 0px 0px 0px;
    width: 100%;
    height: 100%;
    text-align: right;
    max-width: 85px;
}
.dealoption {
   /* margin-top: -1.4em;
    margin-left: 1.5em;*/
}
.dealoption > ul {
    margin-left: 1em;
}
.customizeddeal > ul > li {
    line-height: 2.0em;
}
.quartername {text-align:center;}
.radiotext {margin-top: 0.2em;}
.rpoption {margin-left: 5em;}
.rpoption > input {margin-top: -0.1em;}

table.dashboard td { color: rgb(50, 50, 50);}
td { font-size:0.95em; color: #737373;}
td.subtotal{ color: rgb(50,50,50); font-size: 0.95em;}
td.aData {color: #007cc0; font-size:0.95em;}
td.aSubData {color: #007cc0; }

td.left { text-align:left;}
td.left-1 { text-align:left; padding-left:1em; font-size:0.95em;}
td.left-2 { text-align:left; padding-left:2em; font-size:0.95em;}
tr.seperate td { border-bottom: 1px dotted rgb(200,200,200); }
table tbody { border-bottom: 1px solid rgb(200,200,200);}
table
{
    border-collapse:separate;
}
div .tab-content {overflow: hidden;}


table tr th, table tr td
{
    overflow: visible;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.table-notice
{
    width: 90%;
    margin-left: 5%;
}

.notice {
    color: #237096;
}
.notice-right {
    color: #237096;
    text-align: right;
}
.notice-center {
    color: #237096;
    text-align: center;
    font-size: small;
}


div.lefthalf { margin-top:0.5em; }
div.breakline { border-bottom: 1px solid rgb(238, 238, 238); margin-bottom: 1.0em;}
span.SMSheader { font-size:2em; font-weight:bold; margin-left:0.5em; color: darkslategray}

ul.reportselect { padding-bottom:0; margin-bottom:0em; font-size: 1.0em}
.nav-pills > li.brand { 
    color: #007cc0; 
    padding-top: 7px;
    padding-bottom: 6px;
    padding-left: 5px;
    margin-right: 2em;
    font-weight: bold;
}


.tabs-left > .nav-tabs {
    margin-right: 0px;
}

.alert-gray {
    color: darkslategray;
    background-color: rgb(240,240,240);
    border-color: rgb(221, 221, 221);
}

.alert-gray h4 {
    color: darkslategray;
    margin: .5em 0 .5em;
}


.alert-white {
    color: darkslategray;
    background-color: rgb(255,255,255);
    border-color: rgb(221, 221, 221);
}

.alert-white h4 {
    color: darkslategray;
    margin: .5em 0 .5em;
}

ul .inbox-frame{
    padding: 5px 1em;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: rgb(85, 85, 85);
    vertical-align: middle;
    border: solid 1px 	rgb(204, 204, 204);
    border-radius: 4px 4px 4px 4px;
    overflow-x: auto;
    min-height: 15.1em;
}


ul .inbox-frame:hover
{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0px none;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

div.inbox-frame {
    padding: 5px 1em;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: rgb(85, 85, 85);
    vertical-align: middle;
    border: solid 1px 	rgb(204, 204, 204);
    border-radius: 4px 4px 4px 4px;
    overflow-x: auto;
}

div.inbox-frame:hover
{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0px none;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

td.planinput > input, td.actual > input{
    margin: -0.3em 0 0;
    width:90%;
    float:right;
    text-align:right;
}

td.actual { color: black;}
td.planinput > input[type="checkbox"], td.actual > input[type="checkbox"]{
    margin-top: 0.1em;
}

dt { margin-top: 5px;}

/* MAIN CONTENT
-------------------------------------------------- */
.click-label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.label-input {
    vertical-align: middle;
}

input[type="radio"], input[type="checkbox"] {
    margin: 0 0 0;
    line-height: normal;
}

.error-element {
    color: #ae3f3d;
}

.alert-element {
    color: #936b26;
}

.cell-separator
{
    border-right: 7px solid #fff !important;
    top: -1px;
    height: 31px;
    position: absolute;
    right: -4px;
}

.disable-input {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.disable-checkbox {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.tblNote {
    color: #767676;
    font-size: 0.9em;
    padding-left: 1em;
    font-style: italic;
}

.mainTabTitle {
    color: #8e5c00 !important;
}

.rolePlayDesc {
    padding-right: 20px;
    color: #767676;
    float: right;
}

.content {
  padding-bottom: 150px;
}
.content section {
  padding: 50px 30px 50px;
}
.content .section-head {
  text-transform: uppercase;
  color: #111;
  font-size: 20px;
  line-height: 30px;
  height: 30px;
  padding: 25px 0 5px;
  font-weight: normal;
  position: relative;
}
.content .section-head > b {
  background: #c00;
  display: inline-block;
  height: 3px;
  width: 30px;
  position: absolute;
  left: 0;
  top: 0;
}

.font8 {font-size: 8px; padding-left:2em; line-height:1.4em;}
.font10 {font-size: 10px; padding-left:2em; line-height:1.4em;}
.font11 {font-size: 11px; padding-left:2em; line-height:1.4em;}
.font12 {font-size: 12px; padding-left: 2em; line-height: 1.4em;}
.font1em {font-size: 1em !important}

/* The actual targets for the clicks are not visible, so that the page
cannot scroll to them */

.hack {display: none}

[href="#view0"] {display: block} /* Work-around for browsers that hide the text */

/* After a click, undo the effect of a possible alternative style
sheet that hides columns: */

#view0:target ~ * col,
#view1:target ~ * col,
#view2:target ~ * col,
#view3:target ~ * col,
#view4:target ~ * col,
#view5:target ~ * col,
#view6:target ~ * col,
#view7:target ~ * col,
#view8:target ~ * col,
#view9:target ~ * col,
#view10:target ~ * col,
#view11:target ~ * col,
#view12:target ~ * col {visibility: visible;}

/* After a click on a column heading, all columns to the left of it
are collapsed. E.g., if the target is #view4, then columns
.m01, .m02 and .m03 are collapsed: */

#view2:target ~ * .m01,
#view3:target ~ * .m02,
#view3:target ~ * .m01,
#view4:target ~ * .m03,
#view4:target ~ * .m02,
#view4:target ~ * .m01,
#view5:target ~ * .m04,
#view5:target ~ * .m03,
#view5:target ~ * .m02,
#view5:target ~ * .m01,
#view6:target ~ * .m05,
#view6:target ~ * .m04,
#view6:target ~ * .m03,
#view6:target ~ * .m02,
#view6:target ~ * .m01,
#view7:target ~ * .m06,
#view7:target ~ * .m05,
#view7:target ~ * .m04,
#view7:target ~ * .m03,
#view7:target ~ * .m02,
#view7:target ~ * .m01,
#view8:target ~ * .m07,
#view8:target ~ * .m06,
#view8:target ~ * .m05,
#view8:target ~ * .m04,
#view8:target ~ * .m03,
#view8:target ~ * .m02,
#view8:target ~ * .m01,
#view9:target ~ * .m08,
#view9:target ~ * .m07,
#view9:target ~ * .m06,
#view9:target ~ * .m05,
#view9:target ~ * .m04,
#view9:target ~ * .m03,
#view9:target ~ * .m02,
#view9:target ~ * .m01,
#view10:target ~ * .m09,
#view10:target ~ * .m08,
#view10:target ~ * .m07,
#view10:target ~ * .m06,
#view10:target ~ * .m05,
#view10:target ~ * .m04,
#view10:target ~ * .m03,
#view10:target ~ * .m02,
#view10:target ~ * .m01,
#view11:target ~ * .m10,
#view11:target ~ * .m09,
#view11:target ~ * .m08,
#view11:target ~ * .m07,
#view11:target ~ * .m06,
#view11:target ~ * .m05,
#view11:target ~ * .m04,
#view11:target ~ * .m03,
#view11:target ~ * .m02,
#view11:target ~ * .m01,
#view12:target ~ * .m11,
#view12:target ~ * .m10,
#view12:target ~ * .m09,
#view12:target ~ * .m08,
#view12:target ~ * .m07,
#view12:target ~ * .m06,
#view12:target ~ * .m05,
#view12:target ~ * .m04,
#view12:target ~ * .m03,
#view12:target ~ * .m02,
#view12:target ~ * .m01 {visibility: collapse;}

#view0:target ~ * div .tab-content {overflow: auto;}

.F_page_header {padding-bottom: 15px;}


.small-player .vjs-big-play-button {
    top:40%;
    left:45%;
    width:10%;
    height:10%;
    font-size: 1.5em;
    color: #FAA732;
}

.roleplayphone {
    border-radius: 100px;
    color: #b46100;
    line-height: 25px;
    padding-top: 9px;
    margin-top: -5px;
}

.roleplayphone_review {
    font-weight: 600;
    font-size: 13px;
}

.roleplayBio {
    text-align: justify;
    font-size: 0.9em;
    width: 98%;
    margin: 10px auto 0px;
    min-height: 0px;
    padding-top: 5px;
    border-top: 1px solid #CCC;
}

.roleplayName {
    font-size: 22px;
    height: 1.2em;
    margin: 0px;
    font-weight: bold;
    padding: 0px;
}

.roleplayTitle {
    font-style: italic;
    font-size: 0.9em;
    margin-left: 2px;
}

.rpImage img{
    height:80px;
}

.roleplayBio img{
    max-width: 100%;
    vertical-align: middle;
    border: 0px none;
    height: 80px;
    float: left;
    padding: 10px;
}

.rpHeader{
    padding-top:15px;
}
.inlinediv div {display:inline-block;}

.inbox-notice
{
    background-color: #EEE;
    padding: 10px;
    color: black;
    border: 1px dotted !important;
    margin-bottom: 10px;
    font-size: 0.9em;
}

#QuizSection input[type="radio"], input[type="checkbox"]
{
    margin: 0px 0px 0px;
    line-height: normal;
}

.rpDeal{
    padding-left:30px;
}
.rpNotes {
    padding-left: 30px;
}
.rpCharName {
    font-size: 16px;
    padding-left: 10px;
    text-decoration: underline;
    font-weight: bold;
}

#roleplaytable{
    border: 2px solid #3A87AD;
    border-collapse: separate;
    border-left: 1px solid #3A87AD;
}

#roleplaytable th { 
    color: #0f5c82;
    text-align: center;
    border-bottom: 3px double #0f5c82;
    min-width: 150px;
    border-left: 1px solid #0f5c82;
    background-color: #D9EDF7;
}
#roleplaytable th.current { 
    background-color:#FF9;
}
#roleplaytable th.past { 
    background-color:#ccc;
}

#roleplaytable td { 
    color: #000;
    text-align: center;
    border-left: 1px solid #3A87AD;
    border-top: 1px dotted #3A87AD;
}

#roleplaytable td.current { 
    background-color:#FFC;
}
#roleplaytable td.past { 
    background-color:#ddd;
}

#roleplaytable .rpNOA {
    color: #008000;
    font-weight: bold;
    font-size: 25px;
    line-height: 2;
}
#roleplaytable .rpS {
    color: black;
    font-weight: bold;
    font-size: 25px;
}
#roleplaytable .rpNOT {
    color:#c06600;
    font-weight:bold;
    font-size: 25px;
}
#roleplaytable .rpCalledChar {
    color: black;
    padding-left:20px;
}

#roleplaytable .rpCallTitle {
    padding-left: 10px;
    font-size: 0.9em;
    font-style: italic;
}


table.tblWC {
    border: 2px solid #000;
    width:100%;
} 

table.tblWC tr th{
    background-color: #FCF8E3;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px dotted #DDD;
    border-right: 1px dotted #DDD;
    border-top: 0px none !important;
    padding: 2px 10px !important;
}
table.tblWC tr th.total{
    border-bottom: 2px solid #808080;
}

table.tblWC tr.subheader th{
    border-bottom: 2px solid #808080;
    font-weight: normal !important;
    font-size: .75em;
    color: #00F;
    text-align: center;
    font-style: italic;
}



table.tblWC tr th.first{
    border-right: 1px solid #808080;
    text-align: center;
    width: 50px !important;
}


table.tblWC tr td{
    background-color: #FFF;
    text-align: center;
    vertical-align: middle;
    border-right: 1px dotted #DDD;
}

table.tblWC tr td.first{
    background-color: white;
    text-align:center;
    vertical-align:middle;
    border-right: 1px solid #808080;
    color:black;
    font-weight:700;
}

table.tblWC tr.separate td{
   border-bottom: 2px solid #DDD;
}


table.tblConstrains {border:1px solid blue; width:90%; padding:5px 10px; line-height:1.1em; margin:0 auto; background:white;}
table.tblConstrains tr td, table.tblConstrains tr th  {color:#666; text-align:center;}
table.tblConstrains tr td.first, table.tblConstrains tr th.first {text-align:left; min-width:150px;}
table.tblConstrains tr th  { color:black; border-bottom: 1px solid gray;}

table.actionlog {width:98%; margin: 0 auto;}
table.actionlog tr th {background-color:yellow; border: 1px solid gray;}
table.actionlog tr td {border: 1px solid gray; padding: 0px 10px}

.validation-right{float: right; margin-right: 20px; font-size:0.8em; color:red;}

.noclose .ui-dialog-titlebar-close
{
    display:none;
}

table tr.validation-row td {line-height:10px; font-size:8px; padding:0px; color:red; text-align:left; padding-left:10px;}
table tr td {line-height:30px;}

table tr td input[type="text"] {margin:0;}

.activitylogs .row-fluid [class*="span"]
{
    min-height: 20px;
    font-size: 0.9em;
}
.activitylogs .header 
{
    padding-top:10px;
    
}

.al-Sub-Head {
    font-size: 14px !important;
}
.al-log-section {
    border-bottom: 1px solid #ccc;
    padding: 14px 0 0px 0;
    margin: 2px 0 4px 0;
}

.noactivity {color:#767676;}

.accordion-body{}
.tabs-top{2}

/*Skip to main*/
.skip-link {
    display: flex;
    justify-content: end;
    margin: 4px 20px 4px 0;
    color: #007cc0;
    font-size: .9em;
    font-weight:bold;
}

.pretest-subhead {
    color: #d00000 !important;
}

.stan-video-desc {
    font-size: 0.9em;
    color: #767676;
    font-style: italic;
    padding-right: 35px;
}

/*Override bootstrap CSS*/

.nav-pills > .active > a,
.nav-pills > .active > a:hover {
    color: #fff;
    background-color: #007cc0;
}

.nav-pills > .active > a:focus { background: #08c}

.text-success {
    color: #428443
}

.alert-danger h4,
.alert-error h4 {
    color: #ae3f3d
}

.alert-info {
    color: #237096;
}

.alert-info h4 {
    color: #237096;
}

.alert-success {
    color: #367837;
}

.alert-success h4 {
    color: #367837
}

a {
    color: #0072b6;
    text-decoration: none;
}

.custom-link {
    color:#006eb2;
}

/*Questionaires Radio*/
.radio-container {
    display: flex;
    align-items: center;
}
.radio-label {
    margin-left: 5px;
}

/*Contact us Popup*/
.contact-us-link {
    color: #007cc0;
    cursor: pointer;
}

.version-link {
    line-height:2;
}

.tblNote {
    color: #767676;
    font-size: 0.9em;
    padding-left: 1em;
    font-style: italic;
}

.rolePlayDesc {
    padding-right: 20px;
    color: #767676;
    float: right;
}

.roleplayphone_review {
    font-weight: 600;
    font-size: 13px;
}

.sec-menu {
    position: relative;
    z-index: 777;
    margin-left: auto;
   
}

.sec-menu button {
    padding: 5px 50px;
}

.sec-menu-div {
    display: none;
    justify-content: center;
    position: absolute;
    align-items: center;
    height: auto;
    /*padding: 0 15px;*/
    z-index: 777;
    background-color: #eee;
    border-radius: 4px;
    transition: all 0.4s ease;
    transform: translateY(1000%);
    right: 0;
    min-width: 280px;
    /*min-height: 400px;*/
}

.sec-menu-div.active {
    bottom: 34px;
    z-index: 777;
    position: absolute;
    transform: translateY(0px);
    transition: all 0.4s ease;
}

.contact-title {
    background: #1a809e;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.field-width {
    width: calc(100% - 19px) !important;
    padding: 6px 8px !important;
    margin-bottom: 0 !important;
    margin-top: 15px;
}

.error {
    display: block;
    font-size: 12px;
    color: red;
}

input::file-selector-button {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding:4px 6px;
}

.browse-btn {
    margin-bottom: 0px;
    width: 99% !important;
    padding: 0 !important;
    COLOR: #999;
    margin-top: 15px;
}

.table-responsive { overflow-x: auto; }

@media screen and (max-width: 432px) {
    .sec-menu-div.active {
        bottom: 60px;
    }
}
.quiz-response {
    background-color: #f8f8f8 !important;
    border: 1px solid lightslategray !important;
}

.next-info {
    min-height: auto !important;
    color:darkslategray !important;
}

/*Change Log*/
#changeLogBox {
    height: 90vh;
    color: #333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.navbar-dark .navbar-toggler {
    z-index: 999;
    background-color: #e5e5e5;
    background-image: -moz-linear-gradient(top,#f2f2f2,#e5e5e5);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#e5e5e5));
    background-image: -webkit-linear-gradient(top,#f2f2f2,#e5e5e5);
    background-image: -o-linear-gradient(top,#f2f2f2,#e5e5e5);
    background-image: linear-gradient(to bottom,#f2f2f2,#e5e5e5);
    background-repeat: repeat-x;
    border-color: #e5e5e5 #e5e5e5 #bfbfbf;
    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(startColorstr='#fff2f2f2',endColorstr='#ffe5e5e5',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.075);
}

.sidebar-expanded {
    width: 350px;
    min-width: 180px;
}

.navbar-collapse.collapse {
    display: block;
    background: #f2f2f2;
}

.navbar-collapse {
    flex-basis: inherit;
    flex-grow: inherit;
}

.navbar-collapse.show {
    display: block !important;
}  

.list-group-item {
    color: #0072b6;
    padding: .5rem 1rem;
    background-color: transparent !important;
    border: 0;
    border-bottom: 1px solid rgb(221, 221, 221);
}

.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.list-group a:hover {
    background: #e7e7e7 !important;
    text-decoration: none;
}

.navbar-collapse.show {
    display: block !important;
}

ul.list-group {
    height: calc(100% - 50px);
    overflow: auto;
    scrollbar-width: thin;
}

.right-section-content {
    height: calc(100% - 58px);
    overflow: auto;
    scrollbar-width: thin;
}

h1, h2, h3, h4, h5, h6 {
    padding: 10px 0;
    margin: 0;
}

h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: darkslategray;
}

h2 {
    font-size: 2em;
    font-weight: bold;
    color: darkslategray;
}

h4 {
    font-size: 20px;
    font-weight: bold;
}

.back-button {
    top: 12px;
    right: 20px;
    z-index: 1;
    font-weight: 600;
    color: #fff;
    background-color: #0090FF;
    border-color: #0090FF;
}

.top-header {
    background-color: #f2f2f2;
    color: #000;
    padding: 5px 15px 5px 15px;;
}

#clMainHeading {
    font-size: 35px;
}

@media screen and (max-width: 767px) {
    .top-space {
        border-bottom: 1px solid rgb(221, 221, 221);
        padding: 5px 0 5px 15px;
        position: fixed;
        top: 0;
        z-index: 9;
        background: #fff;
        width: 100%;
    }

    .navbar-collapse.collapse {
        display: none;
    }

    .sidebar-expanded {
        width: 100%;
        position: absolute;
        z-index: 8;
        margin-top: 40px;
        box-shadow: 0px 3px 5px 0 #bfbfbf;
    }

    ul.list-group {
        max-height: 260px;
    }

    .right-section-content {
        height: 100%;
        overflow: inherit;
    }

    .back-button {
        top: 10px;
        right: 10px;
    }

    .top-header {
        padding: 10px 15px;
    }

    #clMainHeading {
        font-size: 35px;
    }  
}