* {
    margin : 0;
	padding : 0;
	overflow-x : hidden;
	border: 0;
}

textarea.task-field-value {
    min-width: 100%;
    min-height: 240;
    resize: vertical;
    font-family: Arial;
}

table input.task-field-value {
    min-width: 100% !important;
    min-height: 50px !important;
    margin-bottom: 0 !important;
    border: none !important;
    font-family: Arial;
}

.options-table tr {
	cursor: pointer;
}

.options-table tr:hover {
	background-color: black;
	color: white;
}

li {
	font-weight: bold;
}

p.product-details {
	font-size: 14pt;
	font-family: Arial;
	margin-bottom: 20px;
	margin-top: 20px;
}

.download-link {
	color: purple !important;
} 

.scrollable {
	overflow-y: scroll;
	overflow-x: hidden;
}

html {
    height : 100vh;
	width : 100%;
	overflow-y: visible !important;
}

body {
	height : 100vh;
	width : 100%;
	overflow-y: visible !important;
}

h1 {
	color : white;
}

#agreement-div a {
    color: rgb(0, 0, 90) !important;
}

.signup-disclaimer {
	font-size: 11pt;
}

.signup-disclaimer a {
	color: rgb(0, 40, 0);
}

div { 
    position : relative;
}

a.signout-href {
	color: white !important;
}

img.icon {
	width: 60px;
	height: 60px;
}

img.product {
	width: 120px;
	height: 120px;
}

#banner, #links, #main, #footer {
    width : 100%;
}

#banner a {
	text-decoration: none;
}

.h1 {
	font-size :40pt;
	color : white;
	text-decoration : none;
}

.h2 {
	font-size: 12pt;
	color: white;
	font-style: oblique;
}

.h1 a {
	color: white;
	text-decoration : none;
}

#banner {
    padding-top : 30px;
    padding-bottom : 30px; 
	background-color: rgb(48, 25, 52);
	text-align : left;
}

#banner marquee {
	color: white;
}

#links{
 	background-image: -ms-linear-gradient(top left, #525252 0%, #00070A 100%);
 	background-image: -moz-linear-gradient(top left, #525252 0%, #00070A 100%);
 	background-image: -o-linear-gradient(top left, #525252 0%, #00070A 100%);
 	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #525252), color-stop(1, #00070A));
 	background-image: -webkit-linear-gradient(top left, #525252 0%, #00070A 100%);
 	background-image: linear-gradient(to bottom right, #525252 0%, #00070A 100%);
 	height: 40px;
	color : white;
	font-size : 12pt;
	font-family : Arial;
	width : 100%;
	overflow-y : hidden;
}

#links a {
	color: rgb(48, 25, 52);
	text-decoration: none;
}

#main {
    min-height : 90%;
	overflow-y: auto !important;
}

#footer {
    padding-top : 40px;
    padding-bottom : 40px;
    font-size : 8pt; 
	text-align : center;
	background-color : black;
	color : grey;
}

div#login-wrapper {
	margin-top: 10%;
    width: 30% !important;
    margin-left: 65% !important;
    border: 2px solid black !important;
}

div#login-wrapper form label {
    width: 25%;
	background-color: black;
	height: 40px;
	color: white;
	float: left;
	line-height: 300%;
	overflow: hidden;
}

div#login-wrapper a {
	text-decoration: none;
	color: rgb(0, 90, 0);
}

div#login-wrapper form input {
    width: 75%;
	float: right;
    height: 40px;
	clear: right;
}

div#login-wrapper form input[type=submit] {
	width: 100%;
	height: 30px;
	background-color: rgb(48, 25, 52);
	color: rgb(255, 255, 255);
	cursor: pointer;
}

#link-buttons, .link-buttons {
 	border-collapse: collapse;
 	width: 100% !important;
	table-layout : fixed;
	overflow: hidden;
}

#link-buttons th, .link-buttons th {
 	cursor: pointer !important;
	color: white;
	height : 40px;
	text-align: left !important;
	font-size: 14pt;
	border-right: 2px solid white;
	vertical-align: center;
}

.link-buttons th:first-child, #link-buttons th:first-child {
	width: 20% !important;
}

#link-buttons th+th, .link-buttons th+th {
    border-left: solid 2px white;
    text-align: center !important;
}

#link-buttons th:last-child, .link-buttons th:last-child {
	border-right: none !important;
}

#link-buttons th:first-child, .link-buttons th:first-child {
	font-size: 1em;
}

input[type=image] {
	width : 30px;
	height : 30px;
}

#link-buttons th:hover{
	/*background-color: rgb(0, 0, 90);*/
}

.selected-page, .link-buttons .selected-page {
	background-color: black !important;
	color: rgb(177, 156, 217) !important;
}

#link-buttons img {
	height : 20px;
	width : 20px;
	float: right;
}

#feedback-form {
	margin-top : 10px;
	width : 50%;
	margin-left : 25%;
}

.posting-form input[type=text] {
	width: 100% !important;
}

.posting-form textarea {
	width: 100%;
	height: 250px !important;
	resize: none;
	border: 2px solid black;
	font-family: 'Kalam', cursive;
}

#feedback-form textarea {
	width : 100%;
	height : 79%;
	resize : none;
	font-size : 14pt;
	border : 2px solid black;
}

#feedback-form input[type=submit], .settings-form .form-table input[type=submit] {
	width : 100%;
	height : 40px;
	border : 2px solid rgb(48, 25, 52);
	background-color : rgb(48, 25, 52);
	color: white;
	cursor : pointer;
	font-size : 16pt;
}

.form-table {
	border-collapse : collapse;
	border : none;
	width : 100%;
}

.form-table th {
	text-align : left;
}

.center-div {
	width : 50%;
	margin-left : 25%;
}

.settings-form {
    margin-top : 10px;
    width : 100%;
}

.settings-form .form-table input[type=password], .settings-form .form-table input[type=text] {
	width : 100%;
}

.settings-form input[type=submit] {
	width: 100%;
	background-color: rgb(48, 25, 52) !important;
}

.settings-form input[type=checkbox] {
	width: 45px;
	cursor: pointer;
	height: 40px;
	display: inline-block;
	margin-top: 10px !important;
	padding: none;
	float: right;
	clear: right;
}

label {
	cursor: pointer;
	overflow: hidden;
}

.settings-form .form-table td {
	font-size : 14pt;
}

#search-form {
	height : 100%;
	overflow-y: hidden;
}

#search-form input[type=text] {
	width : 100%;
	background-color : black;
	color: white;
	height : 100%;
	font-size : 14pt;
	overflow: hidden;
}

.grid-container {
	width : 100%;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 20% 80%;
	grid-template-rows: minmax(100vh, auto);
	grid-template-areas: "s1 s2";
	grid-gap: 0;
	border: 2px solid black;
	overflow-y: hidden;
}

.grid-container1 {
    width : 100%;
	min-height: 100vh;
    display: grid;
    grid-template-columns: 20% 80%;
	grid-template-rows: minmax(50vh, auto) minmax(50vh, auto);
    grid-template-areas: "s1 s2"
                         "s1 s3";
    grid-gap: 0; 
    border: 2px solid black;
    overflow: hidden;
}

.grid-container2 {
    width : 100%;
    height: 100% !important;
    display: grid;
    grid-template-columns: 30% 1% 69%;
    grid-template-rows: 60% 1% 39%;
    grid-template-areas: "s1 s5 s2"
						 "s6 s5 s2"
						 "s3 s5 s4";
    grid-gap: 0;
    border: 2px solid black;
	overflow: hidden;
}

.grid-left {
	grid-area: s1;
	/*display: inline-block;*/
	border : 2px solid black;
}

.grid-left2 {
	grid-area: s1;
    border : 2px solid black;
    /*display: inline-block;*/
}

.grid-right {
	grid-area: s2;
	border: 2px solid black !important;
}

.grid-right2 {
	grid-area: s3;
	border: 2px solid black !important;
}

#settings-form-div {
	width : 100%;
	grid-area: s2
}

#settings-form {
	width : 50% !important;
	left : 25%;
}

.settings-form input[type=password], .settings-form input[type='text'] {
	width : 75%;
	height : 40px;
	border : 2px solid black;
	display : inline-block;
	float : right;
	clear : right;
	font-size : 14pt;
}

.settings-form input[type=submit] {
	width : 100%;
	height : 50px;
	font-size : 14pt;
	background-color : rgb(48, 25, 52);
	color : white;
}

.settings-form label {
	width : 25% !important;
	height : 40px !important;
	background-color : black;
	color : white;
	display : inline-block;
	text-align : left;
	line-height : 250%;
	overflow-y : hidden;
	float : left;
	clear : left;
	font-size : 14pt;
}


.dict-table {
	width : 100%;
	border-collapse : collapse;
}

.dict-table td,th {
	border : 2px solid black;
}

.dict-table th {
	text-align : left;
	width : 25%;
}

.dict-table td {
	text-align : left;
	height : 40px;
}

.form-table {
	width : 100%;
}

.form-table td {
	height : 30px;
	border : 2px solid black;
}

.form-table input {
	height : 30px !important;
	font-size : 14pt;
	width : 100% !important;
}

.del-button {
	color : white !important;
	cursor: pointer;
}

.del-button:enabled {
	background-color : rgb(100, 0, 0) !important;
}

.del-button:disabled {
	background-color: grey !important;
}

.add-button {
	background-color : rgb(0,0, 0);
	color : white;
}

.login-button {
	background-color : rgb(0, 0, 50);
	color : white;
}

ul,li {
	list-style-position: inside;
}

.toolbar-div {
	width : 100%;
	height : 30px;
	background-color : black;
}

.toolbox-form input[type=submit] {
	height : 30px;
}

.context-menu {
  width: 250px;
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  display: none;

  .menu-options {
    list-style: none;
    padding: 10px 0;

    .menu-option {
      font-weight: 500;
      font-size: 14px;
      padding: 10px 40px 10px 20px;
      cursor: pointer !important;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.plain-table {
    width : 100% !important;
    border-collapse : collapse !important;
    border-collapse: collapse;
    border : 2px solid black !important;
}

.plain-table a {
	text-decoration: none;
	color: rgb(0, 40, 0);
}

#basic-table {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 2px solid black !important;
	overflow-y:scroll;
}

#basic-table th {                                                                                                                                                                                        
    border : 2px solid black !important;                                                                                                                                                                                  
    text-align : left !important;                                                                                                                                                                                         
}

#basic-table td {                                                                                                                                                                                        
    height : 30px;                                                                                                                                                                                                        
    border: 2px solid black;                                                                                                                                                                                              
}


.plain-table td{
    height : 30px;
    border: 2px solid black;
}

.plain-table th{
    border : 2px solid black !important;
    text-align : left !important;
}

#feedback-form label {
	border: 2px solid black !important;
	font-size: 12pt !important;
}

#feedback-form input[type=text] {
	height: 30px !important;
	font-size: 12pt !important;
}

.title-splitter {
	width:100% !important; 
	height:5px; 
	background-color:black
}

#ns-pane-splitter {
	background-color: black;
	cursor: ns-resize !important;
	grid-area: s6;
}

#we-pane-splitter {
    background-color: black;
    cursor: ew-resize;
	grid-area: s5
}

.editor-form {
	width: 100%;
}

div.split-view {
	width: 100%;
	height: 100%;
	display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto-fill;
    grid-template-areas: "s1 s2";
    grid-gap: 0;
    border: 2px solid black;
    overflow: hidden;
}

div.split-view-left {
	display: grid-block !important;
	border-right: 2px solid black !important;
}

div.split-view-right {
	display: grid-block !important;
}

.editor-form label {
	width: 25% !important;
	height: 40px !important;
	font-size: 13pt !important;
	background-color: black !important;
	color: white !important;
	line-height: 250% !important;
	float: left;
}

.editor-form input[type="text"], .editor-form select, .editor-form input[type="password"], .editor-form input[type="datetime-local"] .editor-form textarea {
	width: 75% !important;
	border: 2px solid black !important;
	height: 40px !important;
	font-size: 13pt !important;
	margin-bottom: 5px !important;
}

.editor-form textarea {
	resize: none;
	width: 75% !important;
	border: 2px solid black !important;
	height: 250px !important;
	font-size: 13pt !important;
	margin-bottom: 5px !important;
	font-family: 'Kalam', cursive;
}

.editor-form input[type="submit"] {
	width: 33.13% !important;
	height: 50px !important;
	border: 2px solid black !important;
	background-color: rgb(48, 25, 52) !important;
	color: white !important;
	font-size: 14pt;
	cursor: pointer;
}

.editor-form input[type="submit"]+input[type="submit"] {
	margin-left: 0.30% !important;
	cursor: pointer;
}

.editor-form input[type="submit"]:disabled {
    background-color: rgb(50,50, 50) !important;
    color: white !important;
}

input.del-button {
    background-color: rgb(50,0, 0) !important;
    color: white !important;
}

#html-wrapper {
	width: 100%;
}

#html-wrapper .html-text-wrapper {
	width: 50%;
	height: 100%;
	left: 25%;
	font-size: 14pt;
}

.plain-form {
	width: 100%;
}

.plain-form label {
	width: 50%;
	float: left;
	clear: left;
	height: 30px;
	background-color: black;
	color: white;
}

.plain-form input[type=text], .plain-form input[type=password], .plain-form input[type=email] {
	width: 50%;
	height: 30px;
	float: right;
	clear: right;
	border: 2px solid black;
}

.plain-form input[type=checkbox] {
    float: right;
    clear: right;
    height: 30px;
    width: 30px;
}

.plain-form select {
	width: 50%;
	height: 30px;
	border: 2px solid black;
}

.plain-form textarea {
	width: 100%;
	height: 80%;
	border: 2px solid black;
	resize: none;
}

.plain-form input[type=submit] {
	width: 100%;
	height: 40px;
	background-color: rgb(48, 25, 52);
	color: white;
	margin-bottom: 5px;
	cursor: pointer;
}

table input[type=submit] {
	width: 100%;
	height: 100%;
}
.switch:before {
  content: "";
  height: 30px;
  width: 400px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switch {
  background-color: #2196F3;
}

input:focus + .switch {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch {
  display: inline-block;
  cursor: pointer;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

li {
	background-size: 10px !important;
	list-style: none !important;
	background-repeat: no-repeat;
}

li:before {
	content: "";
	height: 10px !important;
	width: 10px !important;
	display: inline-block !important;
	margin-right: 6px !important;
}

li a {
	text-decoration: none;
	color: black;
	font-family: Consolas;
}

div#overlay {
	position: absolute;
	display: absolute !important;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: white;
	overflow: hidden;
}

.left {
	float: left;
	clear: left;
}

.right {
	float: right;
	clear: right;
}

#loader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid rgb(48, 25, 52);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	margin-top: 20%;
	margin-left: 45%;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.feed-wrapper-div {
	width: 100%;
}

.feed-conversation-div {
	display: inline-block;
	width: 20%;
	margin-left: 2%;
	margin-top: 10px;
	user-select: none;
	-webkit-user-select: none;
   	-webkit-touch-callout: none;
   	-khtml-user-select: none;
   	-moz-user-select: none;
   	-ms-user-select: none;
   	-o-user-select: none;
	height: 8vh;
	border: 2px solid black;
	border-radius: 22%;
	padding: 1%;
	overflow: hidden;
	cursor: pointer;
	color: white;
}

.feed-post-div {
}

.feed-post-div textarea {
	width: 100%;
	height: 80%;
	resize: none;
	outline: none;
	font-family: 'Kalam', cursive;
	background-color: transparent;
	color: white;
}

.feed-post-div2 textarea, .feed-post-response-div textarea {
	width: 100%;
    height: 80%;
    resize: none;
    outline: none;
    font-family: 'Kalam', cursive;
    background-color: transparent;
}

.feed-author-div {
	width: 100%;
	height: 20%;
}

.feed-reactions-div {
}

.feed-post-responses-div {
	margin-top: 10px;
	border: 1px solid rgb(48, 25, 52);
}

.feed-post-wrapper-div {
	width: 100%;
	border: 2px solid rgb(48, 25, 52) !important;
	margin-bottom: 10px;
}

.feed-div {
	width: 100%;
	overflow: hidden;
}

.reaction {
	height: 15px !important;
	width: 15px !important;
	background-color: transparent;
}

.product-wrapper-div {
	width: 50%;
	margin-left: 25%;
}

#scripturelab-wrapper {
	margin-left: 10%;
	margin-top: 5%;
	float: left;
	font-size: 9pt;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

#scripturelab-wrapper img {
	width: 120px;
	height: 120px;
}