#canvas:not([mode='list']) .card{
    height:100%;
    overflow-x:auto;
}

body[tabletstyle="Contrary"] .ql-color-black{
    color:white;
}

body[tabletstyle="Contrary"] #nav-fwd,
body[tabletstyle="Contrary"] #nav-back
{
    background-color: white !important;
    opacity: 0.25 !important;
}

#nav-nextup{
    right:0px;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    bottom: 140px;
    text-align:left;
    /*padding-left:20px;*/
    padding-top:5px;
    height: 17%;

}


.card{
    width:100%;
    z-index:0;
    border: 6px solid rgba(255, 255, 255, 0);
    padding: 10px 40px 10px 40px;
    font-weight: 300;
}

/*Mini in landscape*/
@media only screen and (resolution: 264dpi) and (orientation : landscape) {
    .card {
        padding: 10px 40px 10px 40px;
    }
}

/*Air in landscape*/
@media only screen and (resolution: 324dpi) and (orientation : landscape) {
    .card {
        padding: 10px 90px 10px 90px;
    }
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

.mark_yellow{
    background-color: #fbf575;
    color: black;
}
.slideIn {
    position: absolute;;
    left: 100%;
    width: 100%;
    height: 100%;
    background: blue;
    -webkit-animation: slide 0.2s forwards;
    animation: slide 0.2s forwards;
}

.field__bold{
    font-weight: bold;
}

.field__italic{
    font-style: italic;
}

.field__underline{
    text-decoration: underline;
}

.field{
    margin-top:0.5em;
}

.nav, .scroller{
	position: absolute;
    width:80px;
	background-color:#3d80ac;
	opacity: 0.1;
	color: #aeaeae;
	font-size: 60px;

    padding-top:40px;
    transition: background-color;
    transition:0.05s;
}

.nav:active, .scroller:active{
	background-color:#3d80ac;
	opacity: 0.8;
    color: white;

}


#nav-down{
    padding-top:0;
    width:40%;
    margin: 0 auto;
    left: 0;
    right: 0;
    height: 80px;
    bottom:70px;
    border-radius: 0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    text-align: center;
}

#nav-back{
	left:0;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    text-align:right;
    padding-right:5px;
    height: 50%;
    top:70px;
}

#nav-fwd{
	right:0;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    text-align:left;
    top:70px;
    height:50%;
    overflow:hidden;
}


.scroller{

}

#scroll-up{
    left:0;
    text-align:center;
    padding-top:20px;
    height: 17%;
    top:55%;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}

#scroll-down{
    left:0;
    text-align:center;
    padding-top:20px;
    height: 17%;
    bottom: 80px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}


.field-content:focus{
    outline: 0px solid transparent;
    cursor: pointer;
}

.locked{
    border: 6px solid red !important;
}


.questionnumber{
    display: inline-block;
    padding:2px 8px;
    border-radius: 3px;
    font-size: 0.7em;

}

.extra-field-index{
      display: inline-block;
      background-color:rgba(77, 140, 182, 0.5);
      padding: 0 .5em;
      margin-right: .5em;
      color: #fafafa;
      float:left;
      height: 100%;
    }


.extra-field-content{
    height:2em;
}
.extra-field-content div, .extra-field-content span{
    padding-top:0;
}
.field-header{
    opacity: .5;
    margin-right:0.5em;
}

.extra-field-content p {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 28px !important;
}

.extra-field-content h1,
.extra-field-content h2,
.extra-field-content h3,
.extra-field-content h4 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 28px !important;;
    font-weight: 700 !important;
    line-height: 1.6em !important;
}

.markmode #marker-button {
    background-color:yellow;
    color: #aeaeae;
}
.markmode .field-content {
    -webkit-user-select: auto !important;
}

#marker-button {
  color: yellow;
}

.inlineaudio{
    background-color:orange;
    margin-left:100px;
}

.card ul{
    font-size: 1em;
    line-height: 1em;   
}

.ql-color-black {
    color: black;
}

.ql-color-grey {
    color: grey;
}

.ql-color-orange {
    color: #ff9800;
}

.ql-color-red {
    color: red;
}

.ql-color-magenta {
    color: #b700b7;
}

.ql-color-purple {
    color: purple;
}

.ql-color-blue {
    color: blue;
}

.ql-color-lightblue {
    color: #3eb9ff;
}

.ql-color-green {
    color: green;
}


.bg--red { background-color: #f44336 !important; color: white;}
.bg--pink { background-color: #e91e63 !important; color: white;}
.bg--purple { background-color: #9c27b0 !important;color: white;}
.bg--deep-purple { background-color: #673ab7 !important;color: white;}
.bg--indigo { background-color: #3f51b5 !important; color: white;}
.bg--blue { background-color: #2196f3 !important; color: white;}
.bg--light-blue { background-color: #03a9f4 !important;color: white;}
.bg--cyan { background-color: #00bcd4 !important; color: white;}
.bg--teal { background-color: #009688 !important; color: white;}
.bg--green { background-color: #4caf50 !important; color: white;}
.bg--light-green { background-color: #8bc34a !important; color: white;}
.bg--lime { background-color: #cddc39 !important; color: white;}
.bg--yellow { background-color: #ffeb3b !important; color: black;}
.bg--amber { background-color: #ffc107 !important; color: white;}
.bg--orange { background-color: #ff9800 !important; color: white;}
.bg--deep-orange { background-color: #ff5722 !important; color: white;}
.bg--brown { background-color:  #795548 !important; color: white;}
.bg--grey { background-color: #9e9e9e !important; color: white;}
.bg--blue-grey { background-color: #607d8b !important;color: white; }
.bg--black { background-color: #000000 !important;color: white; }

.bg--graph-color {
    background-color: #00ba42 !important;
    color: white;
}
.bg--video-color {
    background-color: #651fff !important;
    color: white;
}
.bg--audio-color {
    background-color: #ff5722 !important;
    color: white;
}

.mark-title,
.mark-video,
.mark-graph,
.mark-audio {
    color: white;
    padding: 0px 3px;
    border-radius: 3px;
}

.mark-info {
    display:none;
}

.mark-title {
    background-color: #5d5653 !important;
}

.mark-video {
    background-color: #651fff !important;
}

.mark-graph {
    background-color: #00ba42 !important;
}

.mark-audio {
    background-color: #ff5722 !important;
}

/* Markers */
.ql-color-bg__yellowmarker {
    background-color: yellow !important;
    color: black !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__yellow500
{
    background-color: #ffeb3b !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__orange500,
.ql-color-bg__orangemarker {
    background-color: #ff9800 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__red500,
.ql-color-bg__redmarker {
    background-color: #f44336 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__pink400,
.ql-color-bg__pinkmarker {
    background-color: #EC407A !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__purple500,
.ql-color-bg__purplemarker {
    background-color: #9c27b0;
     !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__blue700,
.ql-color-bg__bluemarker {
    background-color: #1976D2 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__lightblue300,
.ql-color-bg__lightbluemarker {
    background-color: #4FC3F7 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__teal500,
.ql-color-bg__tealmarker {
    background-color: #009688 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__green500,
.ql-color-bg__greenmarker {
    background-color: #4caf50 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__lime500,
.ql-color-bg__limemarker {
    background-color: #cddc39 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__brown500,
.ql-color-bg__brownmarker {
    background-color: #795548 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}

.ql-color-bg__grey900,
.ql-color-bg__blackmarker {
    background-color: #212121 !important;
    display: inline;
    font-weight: 600;
    padding: 0px 3px;
}


/* LIGHT MARKERS */
.ql-color-bg__yellow100,
.ql-color-bg__yellowllightmarker {
    background-color: #FFF9C4 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__orange100,
.ql-color-bg__orangelightmarker {
    background-color: #FF9800 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__red100,
.ql-color-bg__redlightmarker {
    background-color: #FFCDD2 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__pink50,
.ql-color-bg__pinklightmarker {
    background-color: #FCE4EC !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__purple100,
.ql-color-bg__purplelightmarker {
    background-color: #E1BEE7 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__blue100,
.ql-color-bg__bluelightmarker {
    background-color: #BBDEFB !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__lightblue50,
.ql-color-bg__lightbluelightmarker {
    background-color: #E1F5FE !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__teal100,
.ql-color-bg__teallightmarker {
    background-color: #B2DFDB !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__green100,
.ql-color-bg__greenlightmarker {
    background-color: #C8E6C9 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__lime100,
.ql-color-bg__limelightmarker {
    background-color: #F0F4C3 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__brown100,
.ql-color-bg__brownlightmarker {
    background-color: #D7CCC8 !important;
    display: inline;
    padding: 0px 3px;
}

.ql-color-bg__grey300,
.ql-color-bg__greylightmarker {
    background-color: #E0E0E0 !important;
    display: inline;
    padding: 0px 3px;
}

/* TEXT COLORS */
.ql-color-text__yellow600,
.ql-color-text__yellowtext {
    color: #FDD835 !important;
    display: inline;
}

.ql-color-text__orange700,
.ql-color-text__orangetext {
    color: #F57C00 !important;
    display: inline;
}

.ql-color-text__red500,
.ql-color-text__redtext {
    color: #f44336 !important;
    display: inline;
}

.ql-color-text__pink200,
.ql-color-text__pinktext {
    color: #F48FB1 !important;
    display: inline;
}

.ql-color-text__purple500,
.ql-color-text__purpletext {
    color: #9c27b0 !important;
    display: inline;
}

.ql-color-text__blue700,
.ql-color-text__bluetext {
    color: #1976D2 !important;
    display: inline;
}

.ql-color-text__lightblue400,
.ql-color-text__lightbluetext {
    color: #29B6F6 !important;
    display: inline;
}

.ql-color-text__teal700,
.ql-color-text__tealtext {
    color: #00796B !important;
    display: inline;
}

.ql-color-text__green700,
.ql-color-text__greentext {
    color: #388E3C !important;
    display: inline;
}

.ql-color-text__lime700,
.ql-color-text__limetext {
    color: #AFB42B !important;
    display: inline;
}

.ql-color-text__brown500,
.ql-color-text__browntext {
    color: #795548 !important;
    display: inline;
}

.ql-color-text__black,
.ql-color-text__blacktext {
    color: #1a1a1a !important;
    display: inline;
}





.ql-color-text__lightgreen500 {
    color: #8bc34a !important;
    display: inline;
}

.ql-color-text__lime500 {
    color: #cddc39 !important;
    display: inline;
}

.ql-color-text__yellow500 {
    color: #ffeb3b !important;
    display: inline;
}

.ql-color-text__amber500 {
    color: #ffc107 !important;
    display: inline;
}

.ql-color-text__orange500 {
    color: #ff9800 !important;
    display: inline;
}

.ql-color-text__deeporange500 {
    color: #ff5722 !important;
    display: inline;
}

.ql-color-text__grey500 {
    color: #9e9e9e !important;
    display: inline;
}

.ql-color-text__bluegrey500 {
    color: #607d8b !important;
    display: inline;
}

.ql-color-text__green500 {
    color: #4caf50 !important;
    display: inline;
}

.ql-color-text__teal500 {
    color: #009688 !important;
    display: inline;
}

.ql-color-text__lightblue500 {
    color: #03a9f4 !important;
    display: inline;
}

.ql-color-text__cyan500 {
    color: #00bcd4 !important;
    display: inline;
}

.ql-color-text__blue500 {
    color: #2196f3 !important;
    display: inline;
}

.ql-color-text__pink500 {
    color: #e91e63 !important;
    display: inline;
}

.ql-color-text__indigo500 {
    color: #3f51b5 !important;
    display: inline;
}

.ql-color-text__deeppurple500 {
    color: #673ab7 !important;
    display: inline;
}

.ql-color-bg__pink500 {
    background-color: #e91e63 !important;
    display: inline;
}

.ql-color-bg__pink300 {
    background-color: #F06292 !important;
    display: inline;
}

.ql-color-bg__deeppurple500 {
    background-color: #673ab7 !important;
    display: inline;
}

.ql-color-bg__indigo500 {
    background-color: #3f51b5 !important;
    display: inline;
}

.ql-color-bg__blue500 {
    background-color: #2196f3 !important;
    display: inline;
}

.ql-color-bg__lightblue500 {
    background-color: #03a9f4 !important;
    display: inline;
}

.ql-color-bg__cyan500 {
    background-color: #00bcd4 !important;
    display: inline;
}

.ql-color-bg__green600 {
    background-color: #43A047 !important;
    display: inline;
}

.ql-color-bg__lightgreen500 {
    background-color: #8bc34a !important;
    display: inline;
}

.ql-color-bg__lime400 {
    background-color: #D4E157 !important;
    display: inline;
}

.ql-color-bg__amber500 {
    background-color: #ffc107 !important;
    display: inline;
}

.ql-color-bg__deepora500 {
    background-color: #ff5722 !important;
    display: inline;
}

.ql-color-bg__grey500 {
    background-color: #9e9e9e !important;
    display: inline;
}

.ql-color-bg__bluegrey500 {
    background-color: #607d8b !important;
    display: inline;
}

.ql-color-bg__black500 {
    background-color: #000000 !important;
    display: inline;
}


/* custom dropdown color palette text color  */
.ql-color-text__white500 {
    color: #ffffff !important;
    display: inline;
}

.ql-color-text__yellow600 {
    color: #FDD835 !important;
    display: inline;
}

.ql-color-text__red500 {
    color: #f44336 !important;
    display: inline;
}

.ql-color-text__pink300 {
    color: #F06292 !important;
    display: inline;
}

.ql-color-text__purple500 {
    color: #9c27b0 !important;
    display: inline;
}

.ql-color-text__yellow700 {
    color: #FBC02D !important;
    display: inline;
}

.ql-color-text__lightblue400 {
    color: #29B6F6 !important;
    display: inline;
}

.ql-color-text__teal700 {
    color: #00796B !important;
    display: inline;
}

.ql-color-text__green600 {
    color: #43A047 !important;
    display: inline;
}

.ql-color-text__lime400 {
    color: #D4E157 !important;
    display: inline;
}

.ql-color-text__brown500 {
    color: #795548 !important;
    display: inline;
}

.ql-color-text__grey500 {
    color: #9e9e9e !important;
    display: inline;
}


.ql-color-bg__yellow500,
.ql-color-bg__yellow100,
.ql-color-bg__orange100,
.ql-color-bg__orange500,
.ql-color-bg__red100,
.ql-color-bg__purple100,
.ql-color-bg__pink50,
.ql-color-bg__blue100,
.ql-color-bg__light-blue300,
.ql-color-bg__light-blue50,
.ql-color-bg__teal100,
.ql-color-bg__green100,
.ql-color-bg__lime100,
.ql-color-bg__lime500,
.ql-color-bg__brown100,
.ql-color-bg__grey300 {
    padding: 0px 3px;
    color: #000;
    display: inline;
}

.ql-color-bg__red500,
.ql-color-bg__purple500,
.ql-color-bg__teal500,
.ql-color-bg__brown500,
.ql-color-bg__grey900,
.ql-color-bg__blue700,
.ql-color-bg__pink400,
.ql-color-bg__teal500,
.ql-color-bg__green500,
.ql-color-bg__redmarker,
.ql-color-bg__purplemarker,
.ql-color-bg__tealmarker,
.ql-color-bg__brownmarker,
.ql-color-bg__blackmarker,
.ql-color-bg__bluemarker,
.ql-color-bg__pinkmarker {
    color: #fff;
    padding: 0px 3px;
    display: inline;
}