::-webkit-scrollbar {width: 10px; }/* width */
::-webkit-scrollbar-track {background: #f1f1f1; }/* Track */
::-webkit-scrollbar-thumb {background: #888; } /* Handle */
::-webkit-scrollbar-thumb:hover {background: #555; }/* Handle on hover */
body, html{ overflow: hidden; background: #f1f1f1;  }
a, .animate{transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; }
a{ color: #333;}
a:hover{ text-decoration: none }
.border-bottom, .border-top{border-color: #dee2e6;}
h3{ font-size: 1.5rem; color: darkslateblue; text-align: center;font-family: auto; font-weight: bold;}
h6{ color: #23648c;}
.btn-primary {background-color: #6c757d; border-color: #6c757d;}
.btn-primary:hover {background-color: #0b4369; border-color: #0b4369;}

.error { color: Red; }

.container-area{ margin-top: 40px; height: calc(100vh - 88px);}
.document-card .card{ margin-bottom: 30px}
.document-card hr{ margin-bottom: 1.5rem }
.document-card .card-body{ position: relative; padding: 0; overflow: hidden;}
.document-card .card-body:after {content: " "; display: block; padding-bottom: 80%; }
.document-card .card-body a{position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; color: #333}
.document-card .card:hover{ background: #f8f9fa; border-color:#999 !important; }
.document-card .card-body a h5{ margin-bottom: 20px }
.document-card .card-body a i{ color: #f00; font-size: 30px }
.document-card .card-body a>div{ display: block !important; }

.fixed-top{padding: .3rem 1rem !important}
.fixed-top .dropdown{ font-size: 13px }
.navbar-brand{ padding: 0 }
.navbar-brand img{ width: 60px}

.left-side{ position: fixed; left: 0; top: 40px; bottom: 48px; width: 12%; overflow-y: auto; overflow-x: hidden; }
.right-side{ width: 88%; margin-left: 12% }

.left-side li{}
.left-side li a{ display: block; padding: 5px 10px; color: #333; background: #f8f9fa; font-size: 13px; position: relative;}
.left-side li.active a, .left-side li.active a:hover , .left-side li.done.active a, .left-side li.done.active a:hover{ background-color: #a1d7e6; border-color: #a1d7e6; }
.left-side li.done a, .left-side li.done a:hover{ background: #c7eda4; }

.left-side li.doubt a:after{ content: '' ;height: 5px; width:5px; position: absolute; right: 10px; top: 50%; margin-top: -2px; background-color: #f00; border-radius: 100%; opacity: .6}


.right-side{height: calc(100vh - 90px); position: relative; padding-bottom: 0}
.footer-area{ position: fixed; left: 0; bottom: 0; width: 100%; background: darkgray;  height: 50px; text-align: center; }
.footer-area label{ text-transform: uppercase; font-size: 13px; opacity: .5;color: #fff;}
.footer-area input{ margin-right: 15px; margin-left: 5px }

/*.assignment-dashboard{ position:absolute; width:100%; top:50px; bottom:50px; overflow-y:auto; overflow-x:hidden;}*/
.table-responsive{ height: calc(100vh - 147px); overflow-y:auto; overflow-x:hidden;}
/*.footer-right .form-inline .form-control{ width: 50px }*/