@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

a {
	color: #6864D1 !important;
}

/*Page*/
.templateGrid
{
	display: grid;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	grid-template-columns: 220px 45% 40%;
	grid-template-rows: 100% 100% 100%;
	animation-name: fadeIn;
	animation-duration: 1s;
}
.singleGrid
{
	display: grid;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	grid-template-columns: 220px 81% 8%;
	grid-template-rows: 100% 100%;
	background-color: #2F3452;
}

.nosamplecode .singleGrid{
	grid-template-columns: 220px 81% 8%;
}

.nosamplecode .tooltip-button{
	display: none;
}

.background {
	background-color:#2F3452;
}
.loadingLogo
{
	width: 25%;
	height: 25%;
	position: fixed;
	top: 38%;
	right: 37%;
	animation-name: spinner, moveToSpot, shrink;
	animation-fill-mode: forwards;
	animation-timing-function: linear, ease-in, linear;
	animation-duration: 1s, 2s, 2s;
	animation-delay: 0s, 1s, 1s;
}
.logoTop
{
	width: 70%;
	height: 70%;
}
.logoTop:hover
{
	transform: translateY(2px);
}
/* Scroll Page */
.scrollBtn {
	display: none;
	position: absolute;
	right: 0;
	bottom: 20px;
	z-index: 99;
	font-size: 14px;
	border: none;
	outline: none;
	background-color: #8C9FFF;
	color: white;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
}

.scrollBackBtn {
	display: none;
	position: absolute;
	right: 0;
	bottom: 70px;
	z-index: 99;
	font-size: 14px;
	border: none;
	outline: none;
	background-color: #8C9FFF;
	color: white;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	width: 87px;
}
        
/*The Grid Container fades in (containing all the elements)*/
@keyframes fadeIn
{
	from {opacity: 0.0;}
	to {opacity: 1.0;}
}

/*Menu*/
.menuBar
{
	background-color: #111;
	overflow-x: hidden;
}
.menuOptions
{
	margin-bottom: 10px;
	border-width: 1px;
	border-style: solid;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: grey;		
}
.options
{
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 20px;
	display: block;
	transition: 0.3s;
	color: #818181;
	font-style: bold;
}
.options:hover
{
	color: #f1f1f1;
}
.currentTab {
	border-bottom-color: white;
}

/*Main Content*/
.section {
	margin-bottom: 30px;
}
.sub-section {
	margin-left: 30px;
}
.underline {
	text-decoration: underline;
}
.description
{
	padding-left: 30px;
	padding-right: 30px;
	background-color:  #E9EAF6;
	overflow-x: hidden;
	height:100%;
	position: relative;
}
.descriptionItem
{
	background-color: #E9EAF6;
	padding-bottom: 20px;
	overflow-x: hidden;
}
.descriptionHeader
{
	color:  #2f3452;
	font-size: 30px;
	display: block;
	border-width: 1.5px;
	border-style: solid;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: #6864D1;
}
.descriptionSubHeader
{
	color:  #2f3452;
	font-size: 25px;
	text-decoration: none;
	display: block;
	width: 100%;		
	border-width: 1.0px;
	border-style: solid;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: #6864D1;
	margin-top: 10px;
	margin-bottom: 10px;
}
.descriptionContents{
	padding-top: 5px;
	padding-bottom: 5px;
}
.descriptionBox {
  border-radius: 25px;
  border: 2px solid #8C9FFF;
  padding: 10px 10px 10px 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.callsList {
	list-style-type: square; 
	margin-left: 5%;
}
.regularList {
	list-style-type: square; 
	margin-left: 2.5%;
}
.regularDiscList {
	list-style-type: disc;
	margin-left: 2.5%;
}
.marginTopBottom {
	margin-top: 10px;
	margin-bottom: 10px;
}
.limitedWidth{
	width: 650px;
}
.table-header {
	font-size: 20px; 
	background-color: transparent; 
	color: black;
	padding-bottom: 10px;
}
.underlined-table-header {
	border-width: 1px;
    border-style: solid;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    padding-bottom: 0px;
    border-color: darkgray;
    width: 30%;
	font-size: 18px;
}
.sub-table-header {
	font-size: 16px; 
	background-color: transparent; 
	color: black;
	padding-bottom: 5px;
}
.grayHeader {
	background: #6864D1 !important;
}
.tableList {
	list-style-type: square;
	margin-left: 20px;
}
.expandable {
	color: #6864D1 ;
	font-size: 12px;
}
.expandable:hover,
.expandable:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.linkable {
	color: #109aec;
}
.linkable:hover,
.linkable:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.collapsed {
	display: none;
}

/*Sample Code Column*/
.btnLanguage
{
    border: 1px solid #fff;
    border-color: #111;
    background-color: rgba(255,255,255,.5);
    padding: 5px;
}
.codeLanguageHeader {
	background-color: #111;
	color:  #abb2bf; 
	font-size: 20px;
	padding: 10px;
	position: sticky;
	top: 0;
	z-index: 999;
}
.codeSubHeader {
	font-size: 25px;
}
.codeSubHeader::before {
	content: " ";
	display: block;
	height: 20px; 
	margin: -56px 0 0 0; 
}
.fullScreenBtn
{
	padding-top: 20px;
	border-radius: 12px;
	background-color: transparent;
	border-color: #8C9FFF;
	border-radius: 12px;
	font-size: 15px;
	color: #8C9FFF;
	margin-left: 80%;
}
.fullScreenIcon{
	font-size: 65%;
}
.preCodeSection {
	display: flex !important;
}
.codeSection {
	font-size: 83%;
	padding-right: 30px;
	padding-left: 30px;
	width: 100%;
}
.codeBg
{
	background-color: #111;
	color: white; 
	/* overflow-y: auto; */
	display: flex;
	flex-direction: column;
}
.emphasisBox {
	background: white;
	padding: 10px;
	height: 100%;
	border-left: 5px solid #6864D1;
	width: 500px;
/*	font-weight: bold;*/
	margin-left: 5%;
}
.codeHighlight {
	background-color: white;
	font-family: source-code-pro, monospace;
	padding: 1px 3px 1px 3px;
}

/*Modal*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
.close {
    color: white;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-header {
	align-items: center;
	background-color: #8C9FFF;
	color: white;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 2px 16px;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
    padding: 2px 16px;
    background-color: #8C9FFF;
    color: white;
}
.modal_code {
	font-size: 125%;
}

/*Initial Logo:
	Spin, Move to Top Left, and then Shrink*/
@keyframes spinner
{
	100%{transform: rotateY(360deg);}
}

@keyframes moveToSpot
{
	100%{top: 0%; right: 91.65%;}
}
@keyframes shrink
{
	100%{width: 8.37%; height: 8.37%;}
}
@keyframes fadeIn
{
	from {opacity: 0.0;}
	to {opacity: 1.0;}
}
/*Tokens*/
form#tokensPageSwitchForm,
form#searchCriteriaForm {
	display: table;
}
p.tableAligned { 
	display: table-row;  
}
label.searchForm { 
	display: table-cell;
	width: 110px;
}
input.searchForm { 
	width: 200px;
}
.submitBtn {
    border: 2px solid transparent;
    background: #109aec;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 0;
    text-decoration: none;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    width: 90px;
    margin: 10px 0 10px 0;
}

.adminBtn{
    width:120px;
}
.optionForSort{
    width: 130px;
    height: 25px;
}
/*Colors and Styles*/
.red {
	color: red;
}
.cornflowerblue {
	color: #109aec;
}
.white {
	color: white;
}
.padding-0 {
  padding: 0px 0px;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.hide {
	display: none;
}
.indent {
	margin-left: 5%;
}
.justifyLeft {
	justify-content: left;
}
.black {
	color: black;
}
.font-20 {
	font-size: 20px;
}
.font-16 {
	font-size: 16px;
}
.font-14 {
	font-size: 14px;
}
.mar-tp-20 {
	margin-top: 20px;
}
.mar-tp-10 {
	margin-top: 10px;
}
.mar-bt-10 {
	margin-bottom: 10px;
}
.mar-rt-10 {
	margin-right: 10px;
}
.gray {
	color: gray!important;
}

.prettierBtn {
	background-color: rgba(255,255,255,.5);
	color: #666666;
	border-radius: 0.50em;
	cursor: pointer;
}

.prettierBtn:focus,
.prettierBtn:hover {
	outline: none;
	border: 1.3px solid lightyellow;
	background-color: rgb(255, 239, 239);
}

.prettierBtn option {
	background: snow;
}

.tooltip-button {
    position: fixed;
    top: 40px;
    right: -3px;
    display: inline-block;
	color: #109aec;
	font-size: 15px; 
    transition: all 0.3s ease-in-out;
}

.tooltip-button .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 115%; /* Position the tooltip text above the button */
    left: 50%;
    margin-left: -60px; /* Use half of the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
	display: none;
}

.tooltip-button:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.codesamplebtn{
	border-radius: 50% 0 0 50%;
	height: 40px;
	width: 40px;
	padding-right: 2px;
	background: #8C9FFF;
	color: white;
	position: absolute;
	z-index: 99;
	right:0;
}

.sample-code-placeholder{
	height: auto;
	overflow: hidden;
	writing-mode: tb-rl;
	color: white;
	font-size: 20px;
	margin: 0 auto;
	padding-top:30%;
	padding-right: 40%;
	font-family: 'Poppins', sans-serif;
}

.samplecode-section .simplebar-content-wrapper{
	width: 0%;
}
.hide-forcefully{
	display: none!important;
}

  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
	.codeSidebar {padding-top: 15px;}
	.codeSidebar a {font-size: 18px;}
  }