* {box-sizing: border-box}

/* Set height of body and the document to 100% */
.g-html-fit {
    width: 100%;
    height: 100%;
}

/*  Overall Page stylings  */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

button {
        font-family: Consolas,monaco,monospace;
}

.g-Floater {
    position: absolute;
}

.g-Z-9999 {
    z-index: 9999;
}
.g-12-Font {
    font-size: 12px;
}
.g-16-Font {
    font-size: 12px;
}
.g-24-Font {
    font-size: 24px;
}

.g-overflow-auto {
    overflow: auto;
};
/* Colors for deving */
    .g-green {
    background-color: green;
}
.g-yellow {
    background-color: yellow;
}
.g-mediumpurple {
    background-color: mediumpurple;
}
.g-red {
    background-color: red;
}
.g-darkred {
    background-color: darkred;
}
.g-black{
    background-color: black;
}

.g-darkorange {
    background-color: darkorange;
}
.g-darkblue {
    background-color: darkblue;
}
.g-darkgreen {
    background-color: darkgreen;
}
.g-white {
    background-color: white;
}
.g-blue {
    background-color: blue;
}
.g-orange{
    background-color: orange;
}
.g-purple{
    background-color: purple;
}
.g-lightpurple {
    background-color: mediumpurple;
}
.g-gray {
    background-color: gray;
}
.g-lightgray {
    background-color: lightgray;
}
.g-darkgray {
    background-color: darkgray;
}
.g-lightorange {
    background-color: #cc9966;
}
.g-lightyellow {
    background-color: #cccc66;
}
.g-lightred {
    background-color: #cc6666;
}
.g-lightgreen {
    background-color: #009966;
}
.g-lightblue {
    background-color: #0099ff;
}

.g-babyblue {
    background-color: rgb(46, 185, 229);
}
.g-fb {
    background-color: #3b5998;
 
}
.g-fblight {
    background-color: #4e71ba;
}


/* Use with I frames to make a div work well */
.g-FlexFit {
    height: 100%;
    width: 100%;
}

/* Fits items to their parent */
.g-fit {
    width: 100%;
    height: 100%;
    text-align: center;
}


.g-ImageFit {
    width: 100%;  /*width of parent container*/
    height: 100%; /*height of parent container*/
    object-fit: contain;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Height and width for div sizes */
/* 1-100 */
.g-height1{height:1%}
.g-height2{height:2%}
.g-height3{height:3%}
.g-height4{height:4%}
.g-height5{height:5%}
.g-height6{height:6%}
.g-height7{height:7%}
.g-height8{height:8%}
.g-height9{height:9%}
.g-height10{height:10%}
.g-height11{height:11%}
.g-height12{height:12%}
.g-height13{height:13%}
.g-height14{height:14%}
.g-height15{height:15%}
.g-height16{height:16%}
.g-height17{height:17%}
.g-height18{height:18%}
.g-height19{height:19%}
.g-height20{height:20%}
.g-height21{height:21%}
.g-height22{height:22%}
.g-height23{height:23%}
.g-height24{height:24%}
.g-height25{height:25%}
.g-height26{height:26%}
.g-height27{height:27%}
.g-height28{height:28%}
.g-height29{height:29%}
.g-height30{height:30%}
.g-height31{height:31%}
.g-height32{height:32%}
.g-height33{height:33%}
.g-height33-{height: 33.3333%} /* for thirds */
.g-height34{height:34%}
.g-height35{height:35%}
.g-height36{height:36%}
.g-height37{height:37%}
.g-height38{height:38%}
.g-height39{height:39%}
.g-height40{height:40%}
.g-height41{height:41%}
.g-height42{height:42%}
.g-height43{height:43%}
.g-height44{height:44%}
.g-height45{height:45%}
.g-height46{height:46%}
.g-height47{height:47%}
.g-height48{height:48%}
.g-height49{height:49%}
.g-height50{height:50%}
.g-height51{height:51%}
.g-height52{height:52%}
.g-height53{height:53%}
.g-height54{height:54%}
.g-height55{height:55%}
.g-height56{height:56%}
.g-height57{height:57%}
.g-height58{height:58%}
.g-height59{height:59%}
.g-height60{height:60%}
.g-height61{height:61%}
.g-height62{height:62%}
.g-height63{height:63%}
.g-height64{height:64%}
.g-height65{height:65%}
.g-height66{height:66%}
.g-height67{height:67%}
.g-height68{height:68%}
.g-height69{height:69%}
.g-height70{height:70%}
.g-height71{height:71%}
.g-height72{height:72%}
.g-height73{height:73%}
.g-height74{height:74%}
.g-height75{height:75%}
.g-height76{height:76%}
.g-height77{height:77%}
.g-height78{height:78%}
.g-height79{height:79%}
.g-height80{height:80%}
.g-height81{height:81%}
.g-height82{height:82%}
.g-height83{height:83%}
.g-height84{height:84%}
.g-height85{height:85%}
.g-height86{height:86%}
.g-height87{height:87%}
.g-height88{height:88%}
.g-height89{height:89%}
.g-height90{height:90%}
.g-height91{height:91%}
.g-height92{height:92%}
.g-height93{height:93%}
.g-height94{height:94%}
.g-height95{height:95%}
.g-height96{height:96%}
.g-height97{height:97%}
.g-height98{height:98%}
.g-height99{height:99%}
.g-height100{height:100%}

.g-width1{width:1%}
.g-width2{width:2%}
.g-width3{width:3%}
.g-width4{width:4%}
.g-width5{width:5%}
.g-width6{width:6%}
.g-width7{width:7%}
.g-width8{width:8%}
.g-width9{width:9%}
.g-width10{width:10% !important;}
.g-width11{width:11%}
.g-width12{width:12%}
.g-width13{width:13%}
.g-width14{width:14%}
.g-width15{width:15%}
.g-width16{width:16%}
.g-width17{width:17%}
.g-width18{width:18%}
.g-width19{width:19%}
.g-width20{width:20%}
.g-width21{width:21%}
.g-width22{width:22%}
.g-width23{width:23%}
.g-width24{width:24%}
.g-width25{width:25%}
.g-width26{width:26%}
.g-width27{width:27%}
.g-width28{width:28%}
.g-width29{width:29%}
.g-width30{width:30%}
.g-width31{width:31%}
.g-width32{width:32%}
.g-width33{width:33%}
.g-width33-{width: 33.3333%} /* For thirds */
.g-width34{width:34%}
.g-width35{width:35%}
.g-width36{width:36%}
.g-width37{width:37%}
.g-width38{width:38%}
.g-width39{width:39%}
.g-width40{width:40%}
.g-width41{width:41%}
.g-width42{width:42%}
.g-width43{width:43%}
.g-width44{width:44%}
.g-width45{width:45%}
.g-width46{width:46%}
.g-width47{width:47%}
.g-width48{width:48%}
.g-width49{width:49%}
.g-width50{width:50%}
.g-width51{width:51%}
.g-width52{width:52%}
.g-width53{width:53%}
.g-width54{width:54%}
.g-width55{width:55%}
.g-width56{width:56%}
.g-width57{width:57%}
.g-width58{width:58%}
.g-width59{width:59%}
.g-width60{width:60%}
.g-width61{width:61%}
.g-width62{width:62%}
.g-width63{width:63%}
.g-width64{width:64%}
.g-width65{width:65%}
.g-width66{width:66%}
.g-width67{width:67%}
.g-width68{width:68%}
.g-width69{width:69%}
.g-width70{width:70%}
.g-width71{width:71%}
.g-width72{width:72%}
.g-width73{width:73%}
.g-width74{width:74%}
.g-width75{width:75%}
.g-width76{width:76%}
.g-width77{width:77%}
.g-width78{width:78%}
.g-width79{width:79%}
.g-width80{width:80%}
.g-width81{width:81%}
.g-width82{width:82%}
.g-width83{width:83%}
.g-width84{width:84%}
.g-width85{width:85%}
.g-width86{width:86%}
.g-width87{width:87%}
.g-width88{width:88%}
.g-width89{width:89%}
.g-width90{width:90%}
.g-width91{width:91%}
.g-width92{width:92%}
.g-width93{width:93%}
.g-width94{width:94%}
.g-width95{width:95%}
.g-width96{width:96%}
.g-width97{width:97%}
.g-width98{width:98%}
.g-width99{width:99%}
.g-width100{width:100%}

/* Movement */
.g-scroll-h{overflow: hidden;}
.g-scroll-a{overflow: auto;}
.g-scroll-s{overflow: scroll;}
.g-scroll-v{overflow: visible;}

/* NO scroll bar */
.g-scroll-a-clean{
    overflow: auto;
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;   
}.g-scroll-a-clean::-webkit-scrollbar { 
    width: 0 !important 
}


/***** Text */

.g-consalas {
    font-family: Consolas,monaco,monospace;
}
.g-century-gothic {
    font-family: CenturyGothic, AppleGothic, sans-serif;
}
.g-centered-text {
    text-align: center;
}

.g-centered {
    text-align: center;
    padding: 20vh;
}

.g-text-red {
    color: red;
}

.g-text-green {
    color: green;
}


.g-text-orange {
    color: orange;
}

.g-text-purple {
    color: purple;
}

.g-text-lightpurple {
    color: mediumpurple;
}

.g-text-black {
    color: black;
}

.g-text-white {
    color: white;
}

.g-text-blue {
    color: blue;
}

.g-text-babyblue {
    color: rgb(46, 185, 229);
}

.g-border-color-red{
  border-style: solid;
  border-color: red;
}

.g-border-color-orange{
  border-style: solid;
  border-color: orange;
}

.g-border-color-purple{
  border-style: solid;
  border-color: purple;    
}

.g-border-color-green{
  border-style: solid;
  border-color: green;
}

.g-border-color-white{
  border-style: solid;
  border-color: white;
}

.g-border-color-blue{
  border-style: solid;
  border-color: blue;
}
.g-border-color-babyblue {
  border-style: solid;
  border-color: rgb(46, 185, 229);
}
.g-border-color-black {
    border-style: solid;
    border-color: black;
}
.g-border-color-yellow {
    border-style: solid;
    border-color: yellow;
}

.g-border-color-no-right{
  border-right-style: none;
}

.g-border-color-no-left{
  border-left-style: none;
}

.g-border-color-no-top{
  border-top-style: none;
}

.g-border-color-no-bottom{
  border-bottom-style: none;
}

.g-border-color-no-trb{
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
}

.g-border-color-no-rl{
  border-left-style: none;
  border-right-style: none;
}

.g-border-color-flip{
  font-size: 1.2em;
  border-width: 9px;
  border-style: solid;
  border-color: green;
}

.g-nopadding{
   padding: 0 !important;
   margin: 0 !important;
   
}
.g-no-resize {
    resize: none;    
}

.g-FL {
    float: left;
}
.g-FR {
    float: right;
}

.g-responsive-text-1 {
    font-size: 1vh; /* 1% video height */
}

.g-responsive-text-2 {
    font-size: 2vh; /* 2% video height */
}

.g-responsive-text-3 {
    font-size: 3vh; /* 3% video height */
}

.g-responsive-text-5 {
    font-size: 5vh; /* 5% video height */
}

.g-responsive-text-10 {
    font-size: 10vh; /* 10% video height */
}

.g-no-border {
    border: none;
}

.g-no-dec {
    text-decoration: none;
}

.g-options {
  position: absolute;
  display: none;
  right: 0px;
  top: 0px;
  width: 50%;
  height: 90%;
  z-index: 1;
}

.g-Roboto{font-family:'Roboto';font-weight:400;} /* 400 is industry standard for normal */

.g-RobotoLight{font-familiy:'Roboto';font-weight:300;} /* 300 is industry standard for normal */

.g-RobotoMedium{font-family:'Roboto';font-weight:500;} /* 500 is industry standard for normal */

.g-pointer {
	cursor: pointer;
}

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: red;
}