/** BASIC ELEMENTS **/
html, body {
min-height: 100%;
}
html, body, div, dl, dd, form, img, input, figure, menu {
font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}
html, body, div, dl, dd, form, img, input, figure, menu,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
margin: 0;
padding: 0;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}
li, li:focus, li:hover, li:active,
a, a:focus, a:hover, a:active,
button, button:focus, button:hover, button:active,
input, input:focus, input:hover, input:active {
outline: none;
}
/** BOOTSTRAP OVERRIDES **/
hr.dotted {
border-top: 1px dotted #ccc;
}
.close,
.card a.close,
.card a.close:hover,
.card a.close:active,
.card a.close:visited {
color: rgba(0,0,0,1);
}
a.close.round {
border-radius: 50%;
width: 40px;
height: 40px;
text-align: center;
font-size: 20px;
}
.navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus {
background: rgba(255,255,255,0.1);
}
.dropdown-menu {
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
border-radius: 6px;
}
.navbar .dropdown-menu, .navbar.navbar-default .dropdown-menu {
border-radius: 6px;
}
.modal-header {
position: relative;
}
.modal-header .close {
position: absolute;
right: 30px;
}
.modal-header.with-profile img.profile-img {
bottom: -2px;
top: auto;
margin: 0 0 5px 0;
width: 50px;
height: 50px;
}
.modal-header.with-profile.text-center img.profile-img {
bottom: 0;
position: relative;
}
.modal-title.with-profile {
padding-left: 50px;
}
.modal-header.with-profile.text-center .modal-title.with-profile {
padding-left: 0;
}
.navbar .navbar-form {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.navbar .navbar-nav > li > a {
border-radius: 50%;
margin-top: 10px;
text-align: center;
padding: 10px;
}
.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus {
background-color: rgba(255,255,255,.2);
background-image: none;
}
.navbar-brand,.navbar-nav > li > a {
text-shadow: none !important;
}
.card .title .dropdown-menu li > a,
.dropdown-menu li > a,
.navbar .dropdown-menu li > a,
.navbar.navbar-default .dropdown-menu li > a {
font-size: 14px;
font-weight: 400;
line-height: 40px;
white-space: nowrap;
padding: 0 24px;
}
.card .title .dropdown-menu a i.material-icons {
margin-right: 15px !important;
opacity: .54;
}
.card .title .dropdown-menu a:hover i.material-icons {
opacity: 1;
}
.navbar-header {
min-width: 70%;
}
.material-icons {
margin-right: 7px;
}
.btn, .input-group-btn .btn {
border-radius: 20px;
}
.btn.text-left {
text-align: left;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
margin-bottom: 0;
padding-top: 0;
}
.checkbox .checkbox-material .check, label.checkbox-inline .checkbox-material .check {
height: 21px;
left: 1px;
}
input.form-control {
padding: 0;
}
.multiple-choice-answer .radio label label {
padding-left: 0;
}
.multiple-choice-answer .radio label label,
.multiple-choice-answer .radio label input {
font-size: 14px !important;
}
.radio span, label.radio-inline span {
top: 4px;
}
.fullwidth .togglebutton {
position: relative;
margin: 0 -15px;
padding: 0 15px;
}
.fullwidth .togglebutton:hover {
background-color: #eee;
}
.fullwidth .togglebutton label {
display: block;
text-align: left;
margin-bottom: 0;
padding: 5px 50px 5px 0;
}
.fullwidth .togglebutton label .toggle {
position: absolute;
right: 0;
top: 50%;
margin-top: -8px;
}
.toggle-panel {
display: none;
}
.toggle-panel.active {
display: block;
}
/** DRIVE STYLES **/
#listLoadIndicator .progress {
margin: 0 0 1rem -15px;
width: calc(100% + 30px);
}
/** SKOLON OVERRIDES **/
.skolon-menu-button, a.skolon-menu-button {
background-size: 20px !important;
height: 30px !important;
margin-top: 16px !important;
width: 30px !important;
}
.skolon-menu-button .skolon-menu-button-dropdown, a.skolon-menu-button .skolon-menu-button-dropdown {
z-index: 99 !important;
}
/** NAVBAR **/
section.top-section {
height: 64px;
position: relative;
top: 0;
width: 100%;
}
section.top-section .top-logo {
float: left;
height: 58px;
width: 48px;
margin-right: 5px;
position: relative;
top: -5px;
}
section.top-section.bg-exam,
section.top-section.bg-primary {
height: 200px;
}
section.top-section .bottomPositioned {
position: absolute;
width: 100%;
bottom: 0;
}
section.top-section .bottomPositioned .card {
border-radius: 6px 6px 0 0;
min-height: 44px;
}
.bottomPositioned {
position: relative;
}
.bottomPositioned a.close {
line-height: 40px;
margin-top: -20px;
padding: 0 9px;
position: absolute;
right: 15px;
top: 50%;
}
.bottomPositioned h3 a {
display: inline-block;
line-height: 48px;
height: 48px;
}
.main-content {
position: relative;
top: -50px;
}
.dropdown-menu {
display: block;
opacity: 0 !important;
transform: scale(0);
transform-origin: top right;
transition: all .2s linear;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
}
.open > .dropdown-menu {
opacity: 1 !important;
transform: scale(1);
}
.tableContentRow a.dropdown-toggle {
display: inline-block !important;
width: 40px;
height: 40px;
line-height: 40px !important;
position: relative;
top: 5px;
}
.tableContentRow a.dropdown-toggle:hover,
.tableContentRow .open a.dropdown-toggle {
background: rgba(100,100,100,.1);
}
.navbar.navbar-default.bg-primary {
height: 100%;
}
.nav.navbar-nav.navbar-right li {
margin-right: 10px;
}
.nav.navbar-nav.navbar-right li .material-icons {
margin: 0 !important;
}
.navbar-nav li > .dropdown-menu {
width: 250px;
padding: 16px 0;
}
.navbar-nav li > .dropdown-menu.profile-dropdown {
color: #222;
padding: 16px 0 5px 0px;
width: 350px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown img.rounded {
width: 75px;
height: 75px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown li a {
padding: 0 40px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown p {
margin-bottom: 0;
}
.navbar-nav li > .dropdown-menu.profile-dropdown .btn {
border: 1px solid #ccc;
display: inline-block;
width: 190px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown .small.btn {
height: 30px;
line-height: 30px;
padding: 0 15px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown .small.soft.btn {
border-radius: 15px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown li.thin,
.navbar-nav li > .dropdown-menu.profile-dropdown li.thin a {
height: 30px;
line-height: 30px;
}
.navbar-nav li > .dropdown-menu.profile-dropdown li.thin a {
display:inline-block;
padding: 0px 10px;
}
.navbar-nav li .dropdown-menu li {
margin-right: 0 !important;
}
.navbar-nav li > .dropdown-menu li a {
height: 40px;
line-height: 40px;
overflow: hidden;
outline: none;
padding: 0 24px;
font-weight: 400;
}
.nav.navbar-nav.navbar-right .dropdown-menu li .material-icons,
.navbar .dropdown-menu li a .material-icons {
margin-right: 15px !important;
opacity: .54;
}
section.top-section .card .card-top {
text-align: center;
}
.navbar .navbar-nav > li > a.profile-img-wrapper {
background: #fff;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
display: inline-block;
height: 44px;
width: 44px;
}
/* Notification dropdown */
.navbar-nav li > .dropdown-menu.notifications {
max-width: 600px;
min-width: 300px;
width: 40vw;
}
.navbar .dropdown-menu.notifications li a,
.notifications .notification a {
border-radius: 0px;
height: auto;
padding: 15px 24px;
line-height: 1;
display: flex;
align-items: center;
gap: 12px;
color: rgba(0,0,0,0.87);
text-decoration: none;
}
.notifications .notification a {
border-radius: 10px;
}
.notifications .notification a:hover {
background-color: #eeeeee;
}
.navbar-nav li > .dropdown-menu.notifications li a p,
.notifications .notification a p {
margin-bottom: 5px;
}
.notifications .notification .notification-icon {
color: rgba(0,0,0,0.54);
font-size: 2rem;
}
.notifications .notification:hover .notification-icon {
color: #1b6bb5;
}
.nav.navbar-nav.navbar-right .dropdown-menu.notifications li.notification.unopened .notification-icon,
.notifications .notification.unopened .notification-icon {
color: #1b6bb5;
display: flex;
align-items: center;
opacity: 1;
}
.notification-content {
color: rgba(0,0,0,0.87);
flex: 1;
min-width: 0;
}
.notification-title {
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-date {
white-space: nowrap;
color: rgba(0,0,0,0.4);
}
.notification-status {
align-items: center;
background-color: #1b6bb5;
border-radius: 50%;
display: flex;
height: 8px;
margin-left: 15px !important;
width: 8px;
}
.notifications .notification.opened .notification-status {
display: none;
}
.notification-content-snippet,
.notification-content-text {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
white-space: normal;
word-wrap: break-word;
}
.notification-content-snippet {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-clamp: 3;
box-orient: vertical;
}
.navbar .dropdown-menu.notifications li a.rounded-button {
border: 1px solid #ccc;
border-radius: 15px;
display: inline-block;
padding: 0 15px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 10px;
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications {
background-color: #eee;
padding: 10px 0
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li a {
background-color: rgba(255,255,255,.3);
border: 1px solid #ddd;
margin: 5px 15px;
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li a:hover {
background-color: rgba(255,255,255,.6);
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li.dropdown-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li.dropdown-header a {
margin: 5px 0 0 0;
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li.dropdown-header .flat.rounded-button {
background-color: transparent;
border: none;
margin: 0;
padding: 5px;
height: 34px;
line-height: 24px;
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li.dropdown-header .flat.rounded-button:hover {
background-color: rgba(255,255,255,.6);
}
.navbar-header .menu-wrapper ul.dropdown-menu.notifications li.dropdown-header a.flat.rounded-button i {
margin: 0 !important;
}
/*Profile */
.profile-img {
background: #fff;
background-size: 36px 36px;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
display: inline-block;
height: 36px;
width: 36px;
margin-top: -18px;
position: absolute;
top: 50%;
}
.profile-img.as-icon {
text-align: center;
background: rgba(0,0,0,.10);
color: rgba(0,0,0,.6);
line-height: 36px;
font-weight: 500;
}
.profile-img.as-icon p {
color: #a5a5a5;
font-weight: bold;
line-height: 36px;
}
.profile-img.as-profile {
width: 100px;
height: 100px;
position: relative;
top: 0;
margin-top: 30px;
}
.navbar .profile-img {
position: relative;
top: -6px;
margin-top: 0;
}
.page-title-wrapper {
padding: 0px 15px;
position: relative;
top: 10px;
}
.page-title-wrapper a#backLinks {
width: 48px;
height: 48px;
padding: 0;
margin-right: 5px;
float: left;
}
.page-title-wrapper p a:hover,
.page-title-wrapper span a:hover {
text-decoration: underline;
}
.menu-wrapper {
position: absolute;
right: 0;
top: 0;
padding: 0 15px;
}
.menu-wrapper a.dropdown-toggle.profile-img-wrapper {
line-height: 64px;
}
.menu-wrapper a.dropdown-toggle.profile-img-wrapper .material-icons {
margin-right: 0;
}
.page-title-wrapper span.title-top {
display: inline-block;
font-size: 20px;
font-weight: bold;
overflow: hidden;
position: relative;
width: calc(100% - 90px);
white-space: nowrap;
}
.page-title-wrapper p {
color: rgba(255,255,255,.5);
font-size: 14px;
line-height: 1;
margin: 0 0 0 53px;
overflow: hidden;
padding-bottom: 10px;
width: calc(100% - 90px);
white-space: nowrap;
}
.description-top span.exercise-title {
display: inline;
font-size: 14px;
font-weight: 400;
}
.description-top > a {
color: rgba(255,255,255,.8);
}
.description-top > a::after {
font-family: 'Material Icons';
position: relative;
top: 3px;
padding: 0 5px 0 4px;
content: 'keyboard_arrow_right';
}
.navbar-header .menu-wrapper ul.dropdown-menu li a {
border-radius: 6px;
margin: 0 10px;
}
.navbar-header .menu-wrapper ul.dropdown-menu li a.active {
border-left-color: #1b6bb5;
color: rgba(0,0,0,0.87);
font-weight: 500;
}
.navbar-header .menu-wrapper ul.dropdown-menu li a.active .material-icons {
color: #1b6bb5;
}
/** CARDS **/
.card {
border-radius: 6px;
}
.card .title {
border-radius: 6px 6px 0 0;
}
.card .content {
border-radius: 0;
}
.card .footer {
border-radius: 0 0 6px 6px;
}
.card .title,
.card .content,
.card .footer {
padding: 1.6rem 1.6rem 0.8rem 1.6rem;
}
.card.with-padding .content {
padding: 1.6rem;
}
.card .title .with-icon {
padding-left: 34px;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.card .title .with-icon .material-icons {
position: absolute;
left: 0;
}
.card .title .with-icon a {
border-radius: .2rem;
padding: 0 .6rem;
}
.card .title .dropdown-menu {
top: 85%;
right: 1.6rem;
}
.folder.card:hover {
-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
}
.classOwner {
background-color: #fff;
background-repeat: no-repeat;
background-position: center center;
background-size: 110%;
border: 4px solid #fff;
border-radius: 50%;
height: 5rem;
width: 5rem;
position: relative;
float: right;
top: -2.2rem;
}
/** FOLDER STYLES **/
.tableContentRow {
-webkit-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
position: relative;
}
.tableContentRow:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tableContentRow:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
@media (hover) {
.tableContentRow:not(.titleRow):hover {
background-color: rgba(0,0,0,.02);
}
.tableContentRow.clickable:hover {
background-color: transparent;
-webkit-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
}
.tableContentRow a {
text-decoration: none;
display: block;
}
.tableContentRow.titleRow {
border-radius: 0;
}
.tableContentRow.titleRow p {
font-weight: 500;
text-transform: uppercase;
cursor: default;
}
.tableContentRow a,
.tableContentRow p {
font-size: 13px;
line-height: 50px;
margin: 0;
overflow: hidden;
white-space: nowrap;
}
#exerciseListWrapper .tableContentRow .visibleOnHover {
transition: opacity .3s;
opacity: 0;
}
@media (hover) {
#exerciseListWrapper .tableContentRow:hover .visibleOnHover {
opacity: 1;
}
}
#exerciseListWrapper .tableContentRow .checkbox {
left: -2px;
position: absolute;
padding: 0 15px 0 15px;
}
#exerciseListWrapper .tableContentRow .togglebutton {
line-height: 50px;
}
.tableContentRow i.material-icons {
position: relative;
top: -1px;
}
.tableContentRow .with-icon {
padding-left: 30px;
}
.tableContentRow .with-profile {
padding-left: 50px;
}
.tableContentRow .two-liner {
line-height: 16px;
margin: 9px 0;
}
.tableContentRow .progress-wrapper {
height: 50px;
line-height: 50px;
}
.tableContentRow .progress-wrapper .progress {
margin-top: -2px;
top: 50%;
}
/** LIST STYLES **/
ul.item-list {
padding: 16px 0;
}
ul.item-list li {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
}
ul.item-list li a {
color: #000;
display: block;
font-size: 14px;
height: 40px;
line-height: 40px;
padding: 0 24px;
}
ul.item-list li a:hover,
ul.item-list li a:active {
background: #eee;
text-decoration: none;
}
.list-number {
border-radius: 50%;
float: left;
font-weight: bold;
line-height: 31px;
width: 30px;
height: 30px;
text-align: center;
position: relative;
left: 10px;
top: 5px;
}
.list-number .material-icons {
font-size: 14px;
}
/** HIGHLIGHT STUFF **/
.highlight-element.active {
z-index: 1055 !important;
}
.highlight-element.active.pos-relative {
position: relative;
}
.highlight-element.active.pos-absolute {
position: absolute;
}
.highlight-element.active.active-bg-white {
background: #fff !important;
}
input.highlight-element.active {
border-radius: 6px;
padding: 0 10px;
}
.highlight-element.guide {
background: rgba(255,2552,255,1);
border-radius: 8px;
display: none;
padding: 20px;
position: absolute;
text-align: center;
z-index: 1054;
}
.highlight-element.guide.active {
box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.highlight-element.guide.active p {
display: block;
}
.with-pulse.active {
animation: highlight-pulse 2s infinite;
}
@keyframes highlight-pulse {
0% {
box-shadow: 0 0.1rem 0.2rem 0 rgb(0 0 0 / 22%), 0 0 0.1rem rgb(0 0 0 / 22%);
}
70% {
box-shadow: 0 0.1rem 0.2rem 45px rgb(0 0 0 / 11%), 0 0 0.1rem rgb(0 0 0 / 11%);
}
100% {
box-shadow: 0 0.1rem 0.2rem 45px rgb(0 0 0 / 0%), 0 0 0.1rem rgb(0 0 0 / 0%);
}
}
#highlight-overlay {
background: rgba(22, 102, 192,0.3);
display: none;
height:100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1049;
opacity: 0;
transition: opacity .5s linear;
}
#highlight-overlay.active {
opacity: 1;
}
/** MENU SECTION **/
section.pull-up {
position: relative;
top: -70px;
}
/** MENU CARDS **/
.menu.card .title h2 {
color: rgba(0,0,0,0.87);
font-size: 13px;
font-weight: 500;
line-height: 24px;
text-transform: uppercase;
}
.menu.card .content {
padding-left: 0;
padding-right: 0;
}
.menu.card .content ul {
display: block;
padding: 0;
margin: 0;
}
.menu.card .content ul li {
font-size: 13px;
font-weight: 400;
line-height: 20px;
display: flex;
flex-direction: row;
list-style-image: none;
list-style-position: outside;
list-style: none;
padding: 0;
}
.menu.card .content ul li a {
border-left: 4px solid transparent;
color: rgba(0,0,0,0.549);
display: block;
font-size: 13px;
font-weight: 400;
height: 48px;
line-height: 48px;
overflow: hidden;
white-space: nowrap;
width: 100%;
padding-left: .8rem;
}
.menu.card .content ul li a.active {
border-left-color: #ccc;
color: rgba(0,0,0,0.87);
font-weight: 500;
text-transform: uppercase;
}
@media (hover) {
.menu.card .content ul li:hover a {
background: #eee;
color: rgba(0,0,0,0.87);
text-decoration: none;
}
}
.menu.card .footer a {
color: rgba(0,0,0,.549);
font-size: 13px;
font-weight: 500;
line-height: 24px;
text-transform: uppercase;
padding: 8px;
}
@media (hover) {
.menu.card:hover .footer a {
color: #1b6bb5;
text-decoration: none;
}
}
/** CARDS WITH SECTIONS **/
.card .section {
padding: 0 30px;
transition: opacity linear .3s, left linear .3s;
-webkit-transition: opacity linear .3s, left linear .3s;
-o-transition: opacity linear .3s, left linear .3s;
left: 0px;
padding-top: 20px;
overflow: visible;
}
.card .padded.section {
padding-bottom: 20px;
}
.card .section.removed {
opacity: 0;
left: 400px;
}
.card .selectable.section.active {
overflow: visible;
}
.card .last.section {
padding-top: 0;
padding-bottom: 20px;
}
/** GUIDES **/
.guide-menu {
width: 300px !important;
}
.guide-menu .menu.card .content ul li a {
height: 36px;
line-height: 36px;
}
.guide-menu a,
.guide-menu a:hover,
.guide-menu a:visited,
.guide-menu a:active {
color: #333;
text-decoration: none;
}
.guide-content {
margin-bottom: 50px;
max-width: 1200px;
width: calc(100% - 400px);
}
.guide-content h1 {
padding-bottom: 30px;
}
.guide-content h2 {
padding: 10px 0;
}
.guide-content h3,
.guide-content h4 {
padding: 30px 0 10px 0;
}
.guide-content hr {
clear: both;
}
.guide-content img {
display: block;
margin: 30px auto;
max-width: 300px;
text-align: center;
width: 50%;
}
.guide-content img.pull-left,
.guide-content img.pull-right {
margin: 0 30px 30px 30px;
width: auto;
}
@media (max-width: 992px) {
.guide-menu {
margin-bottom: 30px;
margin-top: 15px;
width: auto !important;
}
.guide-content {
width: auto;
}
}
/** TILES **/
.tiles .card {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
margin: 0;
padding: 7px 10px;
}
/** FOCUS ON ELEMENTS **/
.icon-40 {
display: inline-block;
height: 40px;
line-height: 37px;
margin-left: -8px;
position: relative;
padding-right: 2px;
text-align: right;
top: -8px;
width: 40px;
}
@media (hover) {
a.rounded.icon-40:hover,
.open a.rounded.icon-40.dropdown-toggle {
background-color: rgba(255,255,255,0.1);
}
a.rounded.icon-40.inverted:hover,
.open a.rounded.icon-40.dropdown-toggle.inverted {
background-color: rgba(0,0,0,0.1);
}
}
/** FORM STYLES **/
.form-control {
line-height: 36px;
}
textarea.form-control {
line-height: 1.42857143;
}
.form-group.with-icon {
position: relative;
}
.form-group.with-icon input,
.form-group.with-icon textarea {
padding-left: 30px;
}
.form-group.with-icon.label-floating label.control-label {
left: 30px;
}
.form-group.with-icon .material-icons,
.form-group.with-icon.is-empty.is-focused .material-icons {
color: #BDBDBD;
display: inline-block;
position: absolute;
z-index: 2;
left: 0px;
top: 50%;
margin-top: -15px;
font-size: 18px;
}
.form-group.with-icon.is-empty .material-icons {
display: none;
}
.card .section .form-group.withIconRightMargin {
position: relative;
padding-right: 58px;
}
.card .section input.form-control.with-icon {
padding-left: 28px;
}
.form-group.with-icon .label-floating label.control-label {
left: 30px;
}
/** FORM TOOLBAR **/
#form-toolbar {
position: absolute;
transition: top .5s;
-webkit-transition: top .5s;
-o-transition: top .5s;
left: 50%;
margin-left: 420px;
top: 200px;
width: 52px;
height: auto;
}
#form-toolbar .card {
background: #fff;
color: #757575;
text-align: center;
line-height: 40px;
padding: 10px 0;
z-index: 3;
}
#form-toolbar .card i.material-icons {
border-radius: 6px;
cursor: pointer;
cursor: hand;
display: block;
height: 40px;
line-height: 40px;
margin: 0 5px;
padding: 0;
}
#form-toolbar .card i.material-icons:hover {
background: rgba(0,0,0,.05);
}
#form-toolbar .card .tooltip {
margin-left: -10px;
}
#form-toolbar .card .tooltip-inner {
width: auto !important;
white-space: nowrap;
}
#form-toolbar .card .delimiter {
background: #e5e5e5;
height: 1px;
margin: 5px 0;
}
#form-toolbar .arrow-left {
position: absolute;
top: 106px;
left: -11px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #fff;
z-index: 5;
}
#form-toolbar .arrow-left-shadow {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 110px;
left: -8px;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
z-index: 1;
}
#form-toolbar .hide-on-first-section { opacity:.2; }
#form-toolbar .hide-on-dictation,
#form-toolbar .hide-on-concept-definition {
display:block;
}
body.dictation #form-toolbar .hide-on-dictation,
body.concept-definition #form-toolbar .hide-on-concept-definition {
display:none;
}
/** SIZED BUTTONS **/
.sized-buttons a.btn { padding: 8px; }
.sized-buttons a img,
.sized-buttons a i.material-icons {
color: #777;
font-size: 32px;
height: 32px;
margin-right: 8px;
width: 32px;
}
.fab-wrapper.fixed.bottom-right {
bottom: 2.4rem;
right: 2.4rem;
position: fixed;
z-index: 1055;
clear: both;
width: 76px;
height: 56px;
}
.fab-wrapper.fixed.bottom-right:hover {
height: 190px;
}
.fab-wrapper.fixed.bottom-right .btn-fab {
position: absolute;
bottom: 0;
right: 10px;
-webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
z-index: 49;
}
.fab-wrapper .btn-fab.sub-btn {
opacity: 0;
transition: opacity .2s linear, bottom .2s linear;
-webkit-transition: opacity .2s linear, bottom .2s linear;
-o-transition: opacity .2s linear, bottom .2s linear;
}
.fab-wrapper.fixed.bottom-right:hover .btn-fab.sub-btn {
bottom: 76px;
opacity: 1;
z-index: 48;
}
.fab-wrapper.fixed.bottom-right:hover .btn-fab.sub-btn.btn2 {
bottom: 152px;
z-index: 47;
}
.fab-wrapper .tooltip.left {
margin-left: -20px;
margin-top: 7px;
}
/** GENERAL STYLES **/
.adjusted-height { min-height: 300px; margin-top: -40px; }
.allow-text-wrap { white-space: break-spaces; }
.animated { transition: all .8s linear; -webkit-transition: all .8s linear; -o-transition: all .8s linear; }
.animated.fast { transition-duration: .3s; -webkit-transition-duration: .3s; -o-transition-duration: .3s; }
.bold { font-weight: bold; }
.border-dotted { border-bottom-style: dotted; }
.bottom-bordered { border-bottom: 1px dotted #ccc; }
.btn-large { padding: 20px; }
.clearfix { clear: both; }
.clickable { cursor: pointer; cursor: hand; }
.dashed-left { border-left: 1px dotted #c6c6c6; }
.drop-down-wrapper { position: relative; }
.text-bold { font-weight: bold !important; }
.display-block { display: block !important; }
.d-flex { display: flex !important; }
.d-flex.align-items-center { align-items: center !important; }
.d-flex.justify-content-center { justify-content: center !important; }
.d-flex.flex-column { flex-direction: column !important; }
.fa-extra-margin .fa { margin-right: 5px; }
.half-transparent { opacity: .6; }
.hidden_submit {position: absolute; left:-5000px; top:-5000px;}
.hide-when-active { display:inherit; }
.active .hide-when-active { display:none; }
.invisible { visibility:visible; opacity:0; transition:all .3s; -webkit-transition:all .3s; -o-transition:all .3s; }
.invisible.slow { transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; }
.invisible.active { opacity:1; }
.inline-blocked { display: inline-block !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-left-30 { margin-left: 30px !important; }
.margin-left-50 { margin-left: 50px !important; }
.margin-left-60 { margin-left: 60px !important; }
.margin-right-15 { margin-right: 15px !important; }
.margin-right-15-only { margin: 0 15px 0 0 !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-x { margin-left: 10px; margin-right: 10px; }
.margin-y { margin-top: 10px; margin-bottom: 10px; }
.middle-aligned { vertical-align: middle; }
.no-border { border: none !important; }
.no-left-padding { padding-left: 0px !important;}
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.no-shadow { -webkit-box-shadow: none !important; box-shadow: none !important; }
.no-underline { text-decoration: none !important; }
.no-print, .no-print * { display: initial; }
.nowrap { white-space:nowrap; }
.show-when-active { display:none; }
.active .show-when-active { display:inherit; }
.visible-when-active { opacity: 0; }
.active .visible-when-active { opacity: 1; }
.card .selectable.section:hover .visible-on-hover { opacity: 1; }
.padding-10 { padding: 10px; }
.padding-bottom-15 {padding-bottom: 15px !important;}
.padding-bottom-30 {padding-bottom: 30px !important;}
.padding-left-30 {padding-left: 30px !important;}
.padding-left-50 {padding-left: 50px !important;}
.padding-left-60 {padding-left: 60px !important;}
.padding-left-90 {padding-left: 90px !important;}
.padding-top-30 {padding-top: 30px !important;}
.relativePositioned { position:relative; }
.rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.rotate-90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.rotate-180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.round {border-radius:50%;}
.rounded { border-radius: 50%; }
.rounded-bottom { border-radius: 0 0 6px 6px; }
.rounded-top { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.sm-only { display: none; }
.transparent-when-not-hovered { opacity:.7; transition:opacity .3s linear; -webkit-transition:opacity .3s linear; -o-transition:opacity .3s linear; will-change: opacity; }
.transparent-when-not-hovered:hover { opacity: 1; }
.xs-only { display: none; }
/** SHARE DIALOG **/
#shareLink {
border: 1px solid #ccc;
transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
color: rgba(0,0,0,.7);
display: block;
height: 48px;
line-height: 48px;
margin: 0;
padding: 10px;
width: 100%;
}
.share-link-wrapper:hover #shareLink {
border-color: #555;
color: rgba(0,0,0, 1);
}
#shareLink.highlighted {
border-color: #5F5 !important;
color: #5F5 !important;
}
#accessList {
overflow: auto;
width: 100%;
max-height: 250px;
border-top: 1px solid #e5e5e5;
}
.microsoft-teams-wrapper {
position: absolute;
left: -5000px;
}
/** WITH SELECTED LIST **/
#with-selected-list {
bottom: 10px;
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
height: 0px;
left: 5%;
opacity: 0;
overflow: visible;
position: fixed;
width: 90%;
z-index: 99;
}
#with-selected-list.active {
height: 50px;
opacity: 1;
}
.with-selected {
color: #333;
height: 50px;
line-height: 50px;
opacity: .5;
}
@media (hover) {
.with-selected:hover {
opacity: 1;
}
}
.with-selected p {
display: inline-block;
padding-left: 75px;
}
.with-selected p i.material-icons.arrow-icon {
position: absolute;
left: 35px;
top: 10px;
}
.with-selected p a.btn {
position: relative;
top: -2px;
left: 10px;
display: inline-block;
width: 40px;
margin: 0 5px;
text-align: center;
height: 40px;
padding: 8px;
}
.with-selected p a.btn i.material-icons {
left: 9px;
top: 7px;
}
/** MEDIA QUERIES BASED ON SCREEN SIZE **/
/* Smaller than iPad */
@media only screen and (max-width: 765px) {
.hidden-up-to-764px {
display: none;
}
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
section.top-section {
height: 70px !important;
position: relative;
z-index: 1049;
top: 0;
left: 0;
}
#description-top {
display: none;
}
.main-content {
top: 20px;
}
.md-only {
display: block;
}
section.pull-up {
top: 0;
}
.md-hidden {
display: none !important;
}
.md-no-padding {
padding: 0 !important;
}
.md-no-margin {
margin: 0 !important;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 1024px) {
body {
padding-top: 70px;
min-height: calc(100% - 70px);
}
section.top-section {
height: 70px !important;
position: absolute;
z-index: 1049;
top: 0;
left: 0;
}
#description-top {
display: none;
}
.sm-only {
display: block;
}
section.pull-up {
top: 0;
}
section.pull-up .card {
border-radius: 0 0 6px 6px;
}
.sm-hidden {
display: none !important;
}
.sm-no-padding {
padding: 0 !important;
}
.sm-no-margin {
margin: 0 !important;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width: 812px) {
#title-top {
position: relative;
top: 3px;
}
.main-content {
top: 0;
}
.main-content .card {
border-radius: 0;
}
.menu-wrapper a.dropdown-toggle {
line-height: 64px;
}
.xs-hidden {
display: none !important;
}
.xs-full-height {
height: 100% !important;
}
.xs-only {
display: block;
}
.xs-no-margin {
margin: 0 !important;
}
.xs-no-padding {
padding: 0 !important;
}
.xs-text-center {
text-align: center;
}
.xs-text-left {
text-align: left;
}
.xs-margin-top-20 {
margin-top: 20px;
}
}
/* Small Devices, Tablets Extra */
@media only screen and (min-width: 768px) {
.menu-wrapper.xs-only {
display: none;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.xxs-hidden {
display: none;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/** MEDIA QUERIES FOR PRINTING **/
@media print {
.no-print, .no-print * {
display: none !important;
}
}