* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color:#000000;
  margin:0px;
  font-size:100%;
}
.trytopnav {
  height:40px;
  overflow:hidden;
  min-width:380px;
  position:absolute;
  width:100%;
  top:50px;
  background-color:#E7E9EB;
}
.topnav-icons {
  margin-right:8px;
}
.trytopnav a {
  color:#999999;
}
.mt-bar .mt-bar-item:hover {
  color:#fff t;
}
a.mytatlink {
  padding:0 !important;
  display:inline !important;
}
a.mytatlink:hover,a.mytatlink:active {
  text-decoration:underline !important;
  background-color:transparent !important;
}
#dragbar{
  position:absolute;
  cursor: col-resize;
  z-index:3;
  padding:5px;
}
#shield {
  display:none;
  top:0;
  left:0;
  width:100%;
  position:absolute;
  height:100%;
  z-index:4;
}
#framesize span {
  xfont-family:Consolas, monospace;
}
#container {
  background-color:#E7E9EB;
  width:100%;
  overflow:auto;
  position:absolute;
  top:98px;
  bottom:0;

  height:auto;
}
#textareacontainer, #iframecontainer {
  float:left;
  height:100%;
  width:50%;
}
#textarea, #iframe {
  height:100%;
  width:100%;
  padding-bottom:10px;
  padding-top:1px;
}
#textarea {
  padding-left:10px;
  padding-right:5px;  
}
#iframe {
  padding-left:5px;
  padding-right:10px;  
}
#textareawrapper {
  width:100%;
  height:100%;
  background-color: #ffffff;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#iframewrapper {
  width:100%;
  height:100%;
  -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode {
  background-color: #ffffff;
  font-family: consolas,"courier new",monospace;
  font-size:15px;
  height:100%;
  width:100%;
  padding:8px;
  resize: none;
  border:none;
  line-height:normal;    
}
.CodeMirror.cm-s-default {
  line-height:normal;
  padding: 4px;
  height:100%;
  width:100%;
}
#iframeSource {
  background-color: #ffffff;
  height:100%;
  width:100%;  
}
#iframeResult{
    float: left;
    width: 100%;
    height: 400px;
}
#stackV {background-color:#999999;}
#stackV:hover {background-color:#BBBBBB !important;}
#stackV.horizontal {background-color:transparent;}
#stackV.horizontal:hover {background-color:#BBBBBB !important;}
#stackH.horizontal {background-color:#999999;}
#stackH.horizontal:hover {background-color:#999999 !important;}
#textareacontainer.horizontal,#iframecontainer.horizontal{
  height:50%;
  float:none;
  width:100%;
}
#textarea.horizontal{
  height:100%;
  padding-left:10px;
  padding-right:10px;
}
#iframe.horizontal{
  height:100%;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;  
}
#container.horizontal{
  min-height:200px;
  margin-left:0;
}
#tryitLeaderboard {
  overflow:hidden;
  text-align:center;
  margin-top:5px;
  height:90px;
}
.mt-dropdown-content {width:350px}

@media screen and (max-width: 727px) {
  .trytopnav {top:70px;}
  #container {top:116px;}

}
@media screen and (max-width: 467px) {
  .trytopnav {top:60px;}
  #container {top:106px;}
  .mt-dropdown-content {width:100%}
}
@media only screen and (max-device-width: 768px) {
  #iframewrapper {overflow: auto;}
  #container     {min-width:310px;}
  .stack         {display:none;}
  #tryhome       {display:block;}
}

.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:translate(0,0);
}
.fa-2x {
  font-size:2em;
}
.fa-home:before {content: '\e800'; }
.fa-save:before {content: '\e804'; }
.fa-rotate:before {content: '\e813'; }
.fa-menu:before { content: '\f0c9'; }
.fa-adjust:before { content: '\e80b'; }
.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}
#saveLoader {
    margin:20px;
}

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

body.darktheme {
  background-color:rgb(40, 44, 52);
}
body.darktheme #tryitLeaderboard{
  background-color:rgb(40, 44, 52);
}
body.darktheme .trytopnav{
  background-color:#616161;
  color:#dddddd;
}
body.darktheme #container {
  background-color:#616161;
}
body.darktheme .trytopnav a {
  color:#dddddd;
}
body.darktheme ::-webkit-scrollbar {width:12px;height:3px;}
body.darktheme ::-webkit-scrollbar-track-piece {background-color:#000;}
body.darktheme ::-webkit-scrollbar-thumb {height:50px;background-color: #616161;}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;}

.trytopnav {
  height:48px!important;
}
.fa {
  padding: 10px 10px!important;
}
#saveGDriveBtn, #loadGDriveBtn {
  padding:22px 26px;
}
a.topnav-icons, a.topnav-icons.fa-home, a.topnav-icons.fa-menu {
    font-size: 28px!important;
}
.mt-bar{ 
   float: left;
    width: 50%;
	text-align: center;
}
.mt-button{     border: 0;
    padding: 10px 15px;
    line-height: 34px;}
.mt-button:hover{ background-color: #c14998!important;
    color: #fff!important;}
.ide_coding {
padding: 16px 15px;
    border: 0;
    font-size: 14px;
    margin-left: 10px!important;
    margin: 0;
}
.ide_coding:focus-visible{ outline:0!important;}


.coding_fix-container {
    width: 80%!important;
    position: inherit!important;
    top: 0;
    float: left;padding-right:5px; padding-top:10px; height: 93vh!important;
}
.code_preview_sidebar {
    float: right;
    width: 18%;
    margin-right: 15px;
}
.database_table {
    float: left;
    width: 100%;
    padding-right: 15px;
}
.your-data_base h6{ font-size:16px; font-weight:bold}
.database_table .table tr{ border:0px}
.database_table .table>thead>tr>th{ border-bottom: none!important}
.database_table .table tr th{ font-size:14px}

.database_table .table tr td{ font-size:14px}
.preview_table {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.preview_heading h5{     font-size: 20px; margin-top: 10px;}
.responsive_table .table thead tr th{ font-size:14px}
.responsive_table .table tbody tr td{ font-size:14px}
.database_table .table tr td a{ color:#333; text-decoration: none}
.preview_table_box {
    float: left;
    width: 100%;
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.responsive_table .table{ border:solid 1px #ddd!important}
.preview_table_box p{ font-size:12px;}
.coding_fix-container #textareacontainer{ width:100%!important; height:250px}
.editor_bottom {
    float: left;
    width: 100%;
    padding-left: 10px;
}
.editor_bottom p{ font-size:14px;}
.preview_btn button {
    background-color: #04AA6D;
    border: 0px;
    border-radius: 4px;
    color: #fff;
    padding: 6px 15px;
    font-size: 16px;
}
.preview_btn button:hover{background-color:#c14998;}
@media (min-width:320px)  and  (max-width:720px) {
  #textareacontainer, #iframecontainer {
    width: 100%;
  }
  .mt-bar {
    float: right;
    width: 100%;
    text-align: right;
}
}