.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  top: 0;
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}


.float-right{
  float: right;
}
.float-left{
  float: left;
}

.right-0{
  right: 0%;
}
.left-0{
  left: 0%;
}
.top-0{
  top: 0%;
}
.bottom-0{
  bottom: 0%;
}

.w-5{
  width: 5% !important;
}

.w-10{
  width: 10% !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-5{
  height: 5% !important;
}

.h-10{
  height: 10% !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.opacity-0{
  opacity: 0;
}
.opacity-10{
  opacity: 0.1;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-1{
  opacity: 1;
}
.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}


.text-justify {
  text-align: justify !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}


.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-italic {
  font-style: italic !important;
}



.text-white {
  color: #fff !important;
}


/*from here is purely my stuff*/

.disp-inline-block{
  display: inline-block;
}

.display-block{
  display: block;
}

.disp-flex{
  display: flex;
}

/*==================================================================cursor
*/

.cur-def{
  cursor: default;
}
.cur-pointer{
  cursor: pointer;
}


/*==================================================================COLORS

.bg-c-xxx{
  background-color: xxx;
}

shortened to

.bg-c-xxx


===============================================================background
*/

.bg-c-black{
  background-color: black;
}

.bg-c-silver{
  background-color: silver;
}

.bg-c-gray{
  background-color: gray;
}

.bg-c-white{
  background-color: white;
}

.bg-c-maroon{
  background-color: maroon;
}

.bg-c-red{
  background-color: red;
}

.bg-c-purple{
  background-color: purple;
}

.bg-c-fuchsia{
  background-color: fuchsia;
}

.bg-c-green{
  background-color: green;
}

.bg-c-lime{
  background-color: lime;
}

.bg-c-olive{
  background-color: olive;
}

.bg-c-yellow{
  background-color: yellow;
}

.bg-c-navy{
  background-color: navy;
}

.bg-c-blue{
  background-color: blue;
}

.bg-c-teal{
  background-color: teal;
}

.bg-c-aqua{
  background-color: aqua;
}

.bg-c-aliceblue{
  background-color: aliceblue;
}

.bg-c-antiquewhite{
  background-color: antiquewhite;
}

.bg-c-aqua{
  background-color: aqua;
}

.bg-c-aquamarine{
  background-color: aquamarine;
}

.bg-c-azure{
  background-color: azure;
}

.bg-c-beige{
  background-color: beige;
}

.bg-c-bisque{
  background-color: bisque;
}

.bg-c-black{
  background-color: black;
}

.bg-c-blanchedalmond{
  background-color: blanchedalmond;
}

.bg-c-blue{
  background-color: blue;
}

.bg-c-blueviolet{
  background-color: blueviolet;
}

.bg-c-brown{
  background-color: brown;
}

.bg-c-burlywood{
  background-color: burlywood;
}

.bg-c-cadetblue{
  background-color: cadetblue;
}

.bg-c-chartreuse{
  background-color: chartreuse;
}

.bg-c-chocolate{
  background-color: chocolate;
}

.bg-c-coral{
  background-color: coral;
}

.bg-c-cornflowerblue{
  background-color: cornflowerblue;
}

.bg-c-cornsilk{
  background-color: cornsilk;
}

.bg-c-crimson{
  background-color: crimson;
}

.bg-c-cyan{
  background-color: cyan;
}

.bg-c-darkblue{
  background-color: darkblue;
}

.bg-c-darkcyan{
  background-color: darkcyan;
}

.bg-c-darkgoldenrod{
  background-color: darkgoldenrod;
}

.bg-c-darkgray{
  background-color: darkgray;
}

.bg-c-darkgreen{
  background-color: darkgreen;
}

.bg-c-darkgrey{
  background-color: darkgrey;
}

.bg-c-darkkhaki{
  background-color: darkkhaki;
}

.bg-c-darkmagenta{
  background-color: darkmagenta;
}

.bg-c-darkolivegreen{
  background-color: darkolivegreen;
}

.bg-c-darkorange{
  background-color: darkorange;
}

.bg-c-darkorchid{
  background-color: darkorchid;
}

.bg-c-darkred{
  background-color: darkred;
}

.bg-c-darksalmon{
  background-color: darksalmon;
}

.bg-c-darkseagreen{
  background-color: darkseagreen;
}

.bg-c-darkslateblue{
  background-color: darkslateblue;
}

.bg-c-darkslategray{
  background-color: darkslategray;
}

.bg-c-darkslategrey{
  background-color: darkslategrey;
}

.bg-c-darkturquoise{
  background-color: darkturquoise;
}

.bg-c-darkviolet{
  background-color: darkviolet;
}

.bg-c-deeppink{
  background-color: deeppink;
}

.bg-c-deepskyblue{
  background-color: deepskyblue;
}

.bg-c-dimgray{
  background-color: dimgray;
}

.bg-c-dimgrey{
  background-color: dimgrey;
}

.bg-c-dodgerblue{
  background-color: dodgerblue;
}

.bg-c-firebrick{
  background-color: firebrick;
}

.bg-c-floralwhite{
  background-color: floralwhite;
}

.bg-c-forestgreen{
  background-color: forestgreen;
}

.bg-c-fuchsia{
  background-color: fuchsia;
}

.bg-c-gainsboro{
  background-color: gainsboro;
}

.bg-c-ghostwhite{
  background-color: ghostwhite;
}

.bg-c-gold{
  background-color: gold;
}

.bg-c-goldenrod{
  background-color: goldenrod;
}

.bg-c-gray{
  background-color: gray;
}

.bg-c-green{
  background-color: green;
}

.bg-c-greenyellow{
  background-color: greenyellow;
}

.bg-c-grey{
  background-color: grey;
}

.bg-c-honeydew{
  background-color: honeydew;
}

.bg-c-hotpink{
  background-color: hotpink;
}

.bg-c-indianred{
  background-color: indianred;
}

.bg-c-indigo{
  background-color: indigo;
}

.bg-c-ivory{
  background-color: ivory;
}

.bg-c-khaki{
  background-color: khaki;
}

.bg-c-lavender{
  background-color: lavender;
}

.bg-c-lavenderblush{
  background-color: lavenderblush;
}

.bg-c-lawngreen{
  background-color: lawngreen;
}

.bg-c-lemonchiffon{
  background-color: lemonchiffon;
}

.bg-c-lightblue{
  background-color: lightblue;
}

.bg-c-lightcoral{
  background-color: lightcoral;
}

.bg-c-lightcyan{
  background-color: lightcyan;
}

.bg-c-lightgoldenrodyellow{
  background-color: lightgoldenrodyellow;
}

.bg-c-lightgray{
  background-color: lightgray;
}

.bg-c-lightgreen{
  background-color: lightgreen;
}

.bg-c-lightgrey{
  background-color: lightgrey;
}

.bg-c-lightpink{
  background-color: lightpink;
}

.bg-c-lightsalmon{
  background-color: lightsalmon;
}

.bg-c-lightseagreen{
  background-color: lightseagreen;
}

.bg-c-lightskyblue{
  background-color: lightskyblue;
}

.bg-c-lightslategray{
  background-color: lightslategray;
}

.bg-c-lightslategrey{
  background-color: lightslategrey;
}

.bg-c-lightsteelblue{
  background-color: lightsteelblue;
}

.bg-c-lightyellow{
  background-color: lightyellow;
}

.bg-c-lime{
  background-color: lime;
}

.bg-c-limegreen{
  background-color: limegreen;
}

.bg-c-linen{
  background-color: linen;
}

.bg-c-magenta{
  background-color: magenta;
}

.bg-c-maroon{
  background-color: maroon;
}

.bg-c-mediumaquamarine{
  background-color: mediumaquamarine;
}

.bg-c-mediumblue{
  background-color: mediumblue;
}

.bg-c-mediumorchid{
  background-color: mediumorchid;
}

.bg-c-mediumpurple{
  background-color: mediumpurple;
}

.bg-c-mediumseagreen{
  background-color: mediumseagreen;
}

.bg-c-mediumslateblue{
  background-color: mediumslateblue;
}

.bg-c-mediumspringgreen{
  background-color: mediumspringgreen;
}

.bg-c-mediumturquoise{
  background-color: mediumturquoise;
}

.bg-c-mediumvioletred{
  background-color: mediumvioletred;
}

.bg-c-midnightblue{
  background-color: midnightblue;
}

.bg-c-mintcream{
  background-color: mintcream;
}

.bg-c-mistyrose{
  background-color: mistyrose;
}

.bg-c-moccasin{
  background-color: moccasin;
}

.bg-c-navajowhite{
  background-color: navajowhite;
}

.bg-c-navy{
  background-color: navy;
}

.bg-c-oldlace{
  background-color: oldlace;
}

.bg-c-olive{
  background-color: olive;
}

.bg-c-olivedrab{
  background-color: olivedrab;
}

.bg-c-orange{
  background-color: orange;
}

.bg-c-orangered{
  background-color: orangered;
}

.bg-c-orchid{
  background-color: orchid;
}

.bg-c-palegoldenrod{
  background-color: palegoldenrod;
}

.bg-c-palegreen{
  background-color: palegreen;
}

.bg-c-paleturquoise{
  background-color: paleturquoise;
}

.bg-c-palevioletred{
  background-color: palevioletred;
}

.bg-c-papayawhip{
  background-color: papayawhip;
}

.bg-c-peachpuff{
  background-color: peachpuff;
}

.bg-c-peru{
  background-color: peru;
}

.bg-c-pink{
  background-color: pink;
}

.bg-c-plum{
  background-color: plum;
}

.bg-c-powderblue{
  background-color: powderblue;
}

.bg-c-purple{
  background-color: purple;
}

.bg-c-red{
  background-color: red;
}

.bg-c-rosybrown{
  background-color: rosybrown;
}

.bg-c-royalblue{
  background-color: royalblue;
}

.bg-c-saddlebrown{
  background-color: saddlebrown;
}

.bg-c-salmon{
  background-color: salmon;
}

.bg-c-sandybrown{
  background-color: sandybrown;
}

.bg-c-seagreen{
  background-color: seagreen;
}

.bg-c-seashell{
  background-color: seashell;
}

.bg-c-sienna{
  background-color: sienna;
}

.bg-c-silver{
  background-color: silver;
}

.bg-c-skyblue{
  background-color: skyblue;
}

.bg-c-slateblue{
  background-color: slateblue;
}

.bg-c-slategray{
  background-color: slategray;
}

.bg-c-slategrey{
  background-color: slategrey;
}

.bg-c-snow{
  background-color: snow;
}

.bg-c-springgreen{
  background-color: springgreen;
}

.bg-c-steelblue{
  background-color: steelblue;
}

.bg-c-tan{
  background-color: tan;
}

.bg-c-teal{
  background-color: teal;
}

.bg-c-thistle{
  background-color: thistle;
}

.bg-c-tomato{
  background-color: tomato;
}

.bg-c-turquoise{
  background-color: turquoise;
}

.bg-c-violet{
  background-color: violet;
}

.bg-c-wheat{
  background-color: wheat;
}

.bg-c-white{
  background-color: white;
}

.bg-c-whitesmoke{
  background-color: whitesmoke;
}

.bg-c-yellow{
  background-color: yellow;
}

.bg-c-yellowgreen{
  background-color: yellowgreen;
}


/*==================================================================hover color

*/


.hover-black:hover{
  background-color: black;
}

.hover-silver:hover{
  background-color: silver;
}

.hover-gray:hover{
  background-color: gray;
}

.hover-white:hover{
  background-color: white;
}

.hover-maroon:hover{
  background-color: maroon;
}

.hover-red:hover{
  background-color: red;
}

.hover-purple:hover{
  background-color: purple;
}

.hover-fuchsia:hover{
  background-color: fuchsia;
}

.hover-green:hover{
  background-color: green;
}

.hover-lime:hover{
  background-color: lime;
}

.hover-olive:hover{
  background-color: olive;
}

.hover-yellow:hover{
  background-color: yellow;
}

.hover-navy:hover{
  background-color: navy;
}

.hover-blue:hover{
  background-color: blue;
}

.hover-teal:hover{
  background-color: teal;
}

.hover-aqua:hover{
  background-color: aqua;
}

.hover-aliceblue:hover{
  background-color: aliceblue;
}

.hover-antiquewhite:hover{
  background-color: antiquewhite;
}

.hover-aqua:hover{
  background-color: aqua;
}

.hover-aquamarine:hover{
  background-color: aquamarine;
}

.hover-azure:hover{
  background-color: azure;
}

.hover-beige:hover{
  background-color: beige;
}

.hover-bisque:hover{
  background-color: bisque;
}

.hover-black:hover{
  background-color: black;
}

.hover-blanchedalmond:hover{
  background-color: blanchedalmond;
}

.hover-blue:hover{
  background-color: blue;
}

.hover-blueviolet:hover{
  background-color: blueviolet;
}

.hover-brown:hover{
  background-color: brown;
}

.hover-burlywood:hover{
  background-color: burlywood;
}

.hover-cadetblue:hover{
  background-color: cadetblue;
}

.hover-chartreuse:hover{
  background-color: chartreuse;
}

.hover-chocolate:hover{
  background-color: chocolate;
}

.hover-coral:hover{
  background-color: coral;
}

.hover-cornflowerblue:hover{
  background-color: cornflowerblue;
}

.hover-cornsilk:hover{
  background-color: cornsilk;
}

.hover-crimson:hover{
  background-color: crimson;
}

.hover-cyan:hover{
  background-color: cyan;
}

.hover-darkblue:hover{
  background-color: darkblue;
}

.hover-darkcyan:hover{
  background-color: darkcyan;
}

.hover-darkgoldenrod:hover{
  background-color: darkgoldenrod;
}

.hover-darkgray:hover{
  background-color: darkgray;
}

.hover-darkgreen:hover{
  background-color: darkgreen;
}

.hover-darkgrey:hover{
  background-color: darkgrey;
}

.hover-darkkhaki:hover{
  background-color: darkkhaki;
}

.hover-darkmagenta:hover{
  background-color: darkmagenta;
}

.hover-darkolivegreen:hover{
  background-color: darkolivegreen;
}

.hover-darkorange:hover{
  background-color: darkorange;
}

.hover-darkorchid:hover{
  background-color: darkorchid;
}

.hover-darkred:hover{
  background-color: darkred;
}

.hover-darksalmon:hover{
  background-color: darksalmon;
}

.hover-darkseagreen:hover{
  background-color: darkseagreen;
}

.hover-darkslateblue:hover{
  background-color: darkslateblue;
}

.hover-darkslategray:hover{
  background-color: darkslategray;
}

.hover-darkslategrey:hover{
  background-color: darkslategrey;
}

.hover-darkturquoise:hover{
  background-color: darkturquoise;
}

.hover-darkviolet:hover{
  background-color: darkviolet;
}

.hover-deeppink:hover{
  background-color: deeppink;
}

.hover-deepskyblue:hover{
  background-color: deepskyblue;
}

.hover-dimgray:hover{
  background-color: dimgray;
}

.hover-dimgrey:hover{
  background-color: dimgrey;
}

.hover-dodgerblue:hover{
  background-color: dodgerblue;
}

.hover-firebrick:hover{
  background-color: firebrick;
}

.hover-floralwhite:hover{
  background-color: floralwhite;
}

.hover-forestgreen:hover{
  background-color: forestgreen;
}

.hover-fuchsia:hover{
  background-color: fuchsia;
}

.hover-gainsboro:hover{
  background-color: gainsboro;
}

.hover-ghostwhite:hover{
  background-color: ghostwhite;
}

.hover-gold:hover{
  background-color: gold;
}

.hover-goldenrod:hover{
  background-color: goldenrod;
}

.hover-gray:hover{
  background-color: gray;
}

.hover-green:hover{
  background-color: green;
}

.hover-greenyellow:hover{
  background-color: greenyellow;
}

.hover-grey:hover{
  background-color: grey;
}

.hover-honeydew:hover{
  background-color: honeydew;
}

.hover-hotpink:hover{
  background-color: hotpink;
}

.hover-indianred:hover{
  background-color: indianred;
}

.hover-indigo:hover{
  background-color: indigo;
}

.hover-ivory:hover{
  background-color: ivory;
}

.hover-khaki:hover{
  background-color: khaki;
}

.hover-lavender:hover{
  background-color: lavender;
}

.hover-lavenderblush:hover{
  background-color: lavenderblush;
}

.hover-lawngreen:hover{
  background-color: lawngreen;
}

.hover-lemonchiffon:hover{
  background-color: lemonchiffon;
}

.hover-lightblue:hover{
  background-color: lightblue;
}

.hover-lightcoral:hover{
  background-color: lightcoral;
}

.hover-lightcyan:hover{
  background-color: lightcyan;
}

.hover-lightgoldenrodyellow:hover{
  background-color: lightgoldenrodyellow;
}

.hover-lightgray:hover{
  background-color: lightgray;
}

.hover-lightgreen:hover{
  background-color: lightgreen;
}

.hover-lightgrey:hover{
  background-color: lightgrey;
}

.hover-lightpink:hover{
  background-color: lightpink;
}

.hover-lightsalmon:hover{
  background-color: lightsalmon;
}

.hover-lightseagreen:hover{
  background-color: lightseagreen;
}

.hover-lightskyblue:hover{
  background-color: lightskyblue;
}

.hover-lightslategray:hover{
  background-color: lightslategray;
}

.hover-lightslategrey:hover{
  background-color: lightslategrey;
}

.hover-lightsteelblue:hover{
  background-color: lightsteelblue;
}

.hover-lightyellow:hover{
  background-color: lightyellow;
}

.hover-lime:hover{
  background-color: lime;
}

.hover-limegreen:hover{
  background-color: limegreen;
}

.hover-linen:hover{
  background-color: linen;
}

.hover-magenta:hover{
  background-color: magenta;
}

.hover-maroon:hover{
  background-color: maroon;
}

.hover-mediumaquamarine:hover{
  background-color: mediumaquamarine;
}

.hover-mediumblue:hover{
  background-color: mediumblue;
}

.hover-mediumorchid:hover{
  background-color: mediumorchid;
}

.hover-mediumpurple:hover{
  background-color: mediumpurple;
}

.hover-mediumseagreen:hover{
  background-color: mediumseagreen;
}

.hover-mediumslateblue:hover{
  background-color: mediumslateblue;
}

.hover-mediumspringgreen:hover{
  background-color: mediumspringgreen;
}

.hover-mediumturquoise:hover{
  background-color: mediumturquoise;
}

.hover-mediumvioletred:hover{
  background-color: mediumvioletred;
}

.hover-midnightblue:hover{
  background-color: midnightblue;
}

.hover-mintcream:hover{
  background-color: mintcream;
}

.hover-mistyrose:hover{
  background-color: mistyrose;
}

.hover-moccasin:hover{
  background-color: moccasin;
}

.hover-navajowhite:hover{
  background-color: navajowhite;
}

.hover-navy:hover{
  background-color: navy;
}

.hover-oldlace:hover{
  background-color: oldlace;
}

.hover-olive:hover{
  background-color: olive;
}

.hover-olivedrab:hover{
  background-color: olivedrab;
}

.hover-orange:hover{
  background-color: orange;
}

.hover-orangered:hover{
  background-color: orangered;
}

.hover-orchid:hover{
  background-color: orchid;
}

.hover-palegoldenrod:hover{
  background-color: palegoldenrod;
}

.hover-palegreen:hover{
  background-color: palegreen;
}

.hover-paleturquoise:hover{
  background-color: paleturquoise;
}

.hover-palevioletred:hover{
  background-color: palevioletred;
}

.hover-papayawhip:hover{
  background-color: papayawhip;
}

.hover-peachpuff:hover{
  background-color: peachpuff;
}

.hover-peru:hover{
  background-color: peru;
}

.hover-pink:hover{
  background-color: pink;
}

.hover-plum:hover{
  background-color: plum;
}

.hover-powderblue:hover{
  background-color: powderblue;
}

.hover-purple:hover{
  background-color: purple;
}

.hover-red:hover{
  background-color: red;
}

.hover-rosybrown:hover{
  background-color: rosybrown;
}

.hover-royalblue:hover{
  background-color: royalblue;
}

.hover-saddlebrown:hover{
  background-color: saddlebrown;
}

.hover-salmon:hover{
  background-color: salmon;
}

.hover-sandybrown:hover{
  background-color: sandybrown;
}

.hover-seagreen:hover{
  background-color: seagreen;
}

.hover-seashell:hover{
  background-color: seashell;
}

.hover-sienna:hover{
  background-color: sienna;
}

.hover-silver:hover{
  background-color: silver;
}

.hover-skyblue:hover{
  background-color: skyblue;
}

.hover-slateblue:hover{
  background-color: slateblue;
}

.hover-slategray:hover{
  background-color: slategray;
}

.hover-slategrey:hover{
  background-color: slategrey;
}

.hover-snow:hover{
  background-color: snow;
}

.hover-springgreen:hover{
  background-color: springgreen;
}

.hover-steelblue:hover{
  background-color: steelblue;
}

.hover-tan:hover{
  background-color: tan;
}

.hover-teal:hover{
  background-color: teal;
}

.hover-thistle:hover{
  background-color: thistle;
}

.hover-tomato:hover{
  background-color: tomato;
}

.hover-turquoise:hover{
  background-color: turquoise;
}

.hover-violet:hover{
  background-color: violet;
}

.hover-wheat:hover{
  background-color: wheat;
}

.hover-white:hover{
  background-color: white;
}

.hover-whitesmoke:hover{
  background-color: whitesmoke;
}

.hover-yellow:hover{
  background-color: yellow;
}

.hover-yellowgreen:hover{
  background-color: yellowgreen;
}

/*==================================================================font color

*/

.f-c-black{
  color: black;
}

.f-c-silver{
  color: silver;
}

.f-c-gray{
  color: gray;
}

.f-c-white{
  color: white;
}

.f-c-maroon{
  color: maroon;
}

.f-c-red{
  color: red;
}

.f-c-purple{
  color: purple;
}

.f-c-fuchsia{
  color: fuchsia;
}

.f-c-green{
  color: green;
}

.f-c-lime{
  color: lime;
}

.f-c-olive{
  color: olive;
}

.f-c-yellow{
  color: yellow;
}

.f-c-navy{
  color: navy;
}

.f-c-blue{
  color: blue;
}

.f-c-teal{
  color: teal;
}

.f-c-aqua{
  color: aqua;
}

.f-c-aliceblue{
  color: aliceblue;
}

.f-c-antiquewhite{
  color: antiquewhite;
}

.f-c-aqua{
  color: aqua;
}

.f-c-aquamarine{
  color: aquamarine;
}

.f-c-azure{
  color: azure;
}

.f-c-beige{
  color: beige;
}

.f-c-bisque{
  color: bisque;
}

.f-c-black{
  color: black;
}

.f-c-blanchedalmond{
  color: blanchedalmond;
}

.f-c-blue{
  color: blue;
}

.f-c-blueviolet{
  color: blueviolet;
}

.f-c-brown{
  color: brown;
}

.f-c-burlywood{
  color: burlywood;
}

.f-c-cadetblue{
  color: cadetblue;
}

.f-c-chartreuse{
  color: chartreuse;
}

.f-c-chocolate{
  color: chocolate;
}

.f-c-coral{
  color: coral;
}

.f-c-cornflowerblue{
  color: cornflowerblue;
}

.f-c-cornsilk{
  color: cornsilk;
}

.f-c-crimson{
  color: crimson;
}

.f-c-cyan{
  color: cyan;
}

.f-c-darkblue{
  color: darkblue;
}

.f-c-darkcyan{
  color: darkcyan;
}

.f-c-darkgoldenrod{
  color: darkgoldenrod;
}

.f-c-darkgray{
  color: darkgray;
}

.f-c-darkgreen{
  color: darkgreen;
}

.f-c-darkgrey{
  color: darkgrey;
}

.f-c-darkkhaki{
  color: darkkhaki;
}

.f-c-darkmagenta{
  color: darkmagenta;
}

.f-c-darkolivegreen{
  color: darkolivegreen;
}

.f-c-darkorange{
  color: darkorange;
}

.f-c-darkorchid{
  color: darkorchid;
}

.f-c-darkred{
  color: darkred;
}

.f-c-darksalmon{
  color: darksalmon;
}

.f-c-darkseagreen{
  color: darkseagreen;
}

.f-c-darkslateblue{
  color: darkslateblue;
}

.f-c-darkslategray{
  color: darkslategray;
}

.f-c-darkslategrey{
  color: darkslategrey;
}

.f-c-darkturquoise{
  color: darkturquoise;
}

.f-c-darkviolet{
  color: darkviolet;
}

.f-c-deeppink{
  color: deeppink;
}

.f-c-deepskyblue{
  color: deepskyblue;
}

.f-c-dimgray{
  color: dimgray;
}

.f-c-dimgrey{
  color: dimgrey;
}

.f-c-dodgerblue{
  color: dodgerblue;
}

.f-c-firebrick{
  color: firebrick;
}

.f-c-floralwhite{
  color: floralwhite;
}

.f-c-forestgreen{
  color: forestgreen;
}

.f-c-fuchsia{
  color: fuchsia;
}

.f-c-gainsboro{
  color: gainsboro;
}

.f-c-ghostwhite{
  color: ghostwhite;
}

.f-c-gold{
  color: gold;
}

.f-c-goldenrod{
  color: goldenrod;
}

.f-c-gray{
  color: gray;
}

.f-c-green{
  color: green;
}

.f-c-greenyellow{
  color: greenyellow;
}

.f-c-grey{
  color: grey;
}

.f-c-honeydew{
  color: honeydew;
}

.f-c-hotpink{
  color: hotpink;
}

.f-c-indianred{
  color: indianred;
}

.f-c-indigo{
  color: indigo;
}

.f-c-ivory{
  color: ivory;
}

.f-c-khaki{
  color: khaki;
}

.f-c-lavender{
  color: lavender;
}

.f-c-lavenderblush{
  color: lavenderblush;
}

.f-c-lawngreen{
  color: lawngreen;
}

.f-c-lemonchiffon{
  color: lemonchiffon;
}

.f-c-lightblue{
  color: lightblue;
}

.f-c-lightcoral{
  color: lightcoral;
}

.f-c-lightcyan{
  color: lightcyan;
}

.f-c-lightgoldenrodyellow{
  color: lightgoldenrodyellow;
}

.f-c-lightgray{
  color: lightgray;
}

.f-c-lightgreen{
  color: lightgreen;
}

.f-c-lightgrey{
  color: lightgrey;
}

.f-c-lightpink{
  color: lightpink;
}

.f-c-lightsalmon{
  color: lightsalmon;
}

.f-c-lightseagreen{
  color: lightseagreen;
}

.f-c-lightskyblue{
  color: lightskyblue;
}

.f-c-lightslategray{
  color: lightslategray;
}

.f-c-lightslategrey{
  color: lightslategrey;
}

.f-c-lightsteelblue{
  color: lightsteelblue;
}

.f-c-lightyellow{
  color: lightyellow;
}

.f-c-lime{
  color: lime;
}

.f-c-limegreen{
  color: limegreen;
}

.f-c-linen{
  color: linen;
}

.f-c-magenta{
  color: magenta;
}

.f-c-maroon{
  color: maroon;
}

.f-c-mediumaquamarine{
  color: mediumaquamarine;
}

.f-c-mediumblue{
  color: mediumblue;
}

.f-c-mediumorchid{
  color: mediumorchid;
}

.f-c-mediumpurple{
  color: mediumpurple;
}

.f-c-mediumseagreen{
  color: mediumseagreen;
}

.f-c-mediumslateblue{
  color: mediumslateblue;
}

.f-c-mediumspringgreen{
  color: mediumspringgreen;
}

.f-c-mediumturquoise{
  color: mediumturquoise;
}

.f-c-mediumvioletred{
  color: mediumvioletred;
}

.f-c-midnightblue{
  color: midnightblue;
}

.f-c-mintcream{
  color: mintcream;
}

.f-c-mistyrose{
  color: mistyrose;
}

.f-c-moccasin{
  color: moccasin;
}

.f-c-navajowhite{
  color: navajowhite;
}

.f-c-navy{
  color: navy;
}

.f-c-oldlace{
  color: oldlace;
}

.f-c-olive{
  color: olive;
}

.f-c-olivedrab{
  color: olivedrab;
}

.f-c-orange{
  color: orange;
}

.f-c-orangered{
  color: orangered;
}

.f-c-orchid{
  color: orchid;
}

.f-c-palegoldenrod{
  color: palegoldenrod;
}

.f-c-palegreen{
  color: palegreen;
}

.f-c-paleturquoise{
  color: paleturquoise;
}

.f-c-palevioletred{
  color: palevioletred;
}

.f-c-papayawhip{
  color: papayawhip;
}

.f-c-peachpuff{
  color: peachpuff;
}

.f-c-peru{
  color: peru;
}

.f-c-pink{
  color: pink;
}

.f-c-plum{
  color: plum;
}

.f-c-powderblue{
  color: powderblue;
}

.f-c-purple{
  color: purple;
}

.f-c-red{
  color: red;
}

.f-c-rosybrown{
  color: rosybrown;
}

.f-c-royalblue{
  color: royalblue;
}

.f-c-saddlebrown{
  color: saddlebrown;
}

.f-c-salmon{
  color: salmon;
}

.f-c-sandybrown{
  color: sandybrown;
}

.f-c-seagreen{
  color: seagreen;
}

.f-c-seashell{
  color: seashell;
}

.f-c-sienna{
  color: sienna;
}

.f-c-silver{
  color: silver;
}

.f-c-skyblue{
  color: skyblue;
}

.f-c-slateblue{
  color: slateblue;
}

.f-c-slategray{
  color: slategray;
}

.f-c-slategrey{
  color: slategrey;
}

.f-c-snow{
  color: snow;
}

.f-c-springgreen{
  color: springgreen;
}

.f-c-steelblue{
  color: steelblue;
}

.f-c-tan{
  color: tan;
}

.f-c-teal{
  color: teal;
}

.f-c-thistle{
  color: thistle;
}

.f-c-tomato{
  color: tomato;
}

.f-c-turquoise{
  color: turquoise;
}

.f-c-violet{
  color: violet;
}

.f-c-wheat{
  color: wheat;
}

.f-c-white{
  color: white;
}

.f-c-whitesmoke{
  color: whitesmoke;
}

.f-c-yellow{
  color: yellow;
}

.f-c-yellowgreen{
  color: yellowgreen;
}

/*========================================================BORDER


*/
.border-1px-black{
  border: 1px solid black;
}


/*========================================================BAR


*/

.sidebar-right{
  position: absolute;
  right: 0;
}

.sidebar-right-5{
  position: absolute;
  right: 0;
  width: 5%;
}

.sidebar-right-10{
  position: absolute;
  right: 0;
  width: 10%;
}

.sidebar-right-15{
  position: absolute;
  right: 0;
  width: 15%;
}

.sidebar-right-20{
  position: absolute;
  right: 0;
  width: 20%;
}

.sidebar-right-25{
  position: absolute;
  right: 0;
  width: 25%;
}

.sidebar-right-30{
  position: absolute;
  right: 0;
  width: 30%;
}

.sidebar-right-35{
  position: absolute;
  right: 0;
  width: 35%;
}

.sidebar-right-40{
  position: absolute;
  right: 0;
  width: 40%;
}

.sidebar-right-45{
  position: absolute;
  right: 0;
  width: 45%;
}

.sidebar-right-50{
  position: absolute;
  right: 0;
  width: 50%;
}

.sidebar-right-55{
  position: absolute;
  right: 0;
  width: 55%;
}

.sidebar-right-60{
  position: absolute;
  right: 0;
  width: 60%;
}

.sidebar-right-65{
  position: absolute;
  right: 0;
  width: 65%;
}

.sidebar-right-70{
  position: absolute;
  right: 0;
  width: 70%;
}

.sidebar-right-75{
  position: absolute;
  right: 0;
  width: 75%;
}

.sidebar-right-80{
  position: absolute;
  right: 0;
  width: 80%;
}

.sidebar-right-85{
  position: absolute;
  right: 0;
  width: 85%;
}

.sidebar-right-90{
  position: absolute;
  right: 0;
  width: 90%;
}

.sidebar-right-95{
  position: absolute;
  right: 0;
  width: 95%;
}

.sidebar-left-5{
  position: absolute;
  left: 0;
  width: 5%;
}

.sidebar-left-10{
  position: absolute;
  left: 0;
  width: 10%;
}

.sidebar-left-15{
  position: absolute;
  left: 0;
  width: 15%;
}

.sidebar-left-20{
  position: absolute;
  left: 0;
  width: 20%;
}

.sidebar-left-25{
  position: absolute;
  left: 0;
  width: 25%;
}

.sidebar-left-30{
  position: absolute;
  left: 0;
  width: 30%;
}

.sidebar-left-35{
  position: absolute;
  left: 0;
  width: 35%;
}

.sidebar-left-40{
  position: absolute;
  left: 0;
  width: 40%;
}

.sidebar-left-45{
  position: absolute;
  left: 0;
  width: 45%;
}

.sidebar-left-50{
  position: absolute;
  left: 0;
  width: 50%;
}

.sidebar-left-55{
  position: absolute;
  left: 0;
  width: 55%;
}

.sidebar-left-60{
  position: absolute;
  left: 0;
  width: 60%;
}

.sidebar-left-65{
  position: absolute;
  left: 0;
  width: 65%;
}
  
.sidebar-left-70{
  position: absolute;
  left: 0;
  width: 70%;
}

.sidebar-left-75{
  position: absolute;
  left: 0;
  width: 75%;
}

.sidebar-left-80{
  position: absolute;
  left: 0;
  width: 80%;
}

.sidebar-left-85{
  position: absolute;
  left: 0;
  width: 85%;
}

.sidebar-left-90{
  position: absolute;
  left: 0;
  width: 90%;
}

.sidebar-left-95{
  position: absolute;
  left: 0;
  width: 95%;
}

.opacity-hide{
  opacity: 0;
}
.opacity-hide:hover{
  opacity: 1;
}

/*========================================================z-indices / z-index


*/

.z-0{
  z-index: 0;
}
.z-1{
  z-index: 1;
}
.z-2{
  z-index: 2;
}
.z-3{
  z-index: 3;
}
.z-4{
  z-index: 4;
}
.z-5{
  z-index: 5;
}
.z-6{
  z-index: 6;
}
.z-7{
  z-index: 7;
}
.z-8{
  z-index: 8;
}
.z-9{
  z-index: 9;
}
.z-10{
  z-index: 10;
}
.z-inf{
  z-index: 999999;
}
.z-hell{
  z-index: -999999;
}

/*========================================================SPECIAL


*/


.show_listeners{
  width: 10%;
  height: 10%;
  overflow: auto;
  background-color: white;
  opacity: 0.3;
  
  transition-property: width, height;
  transition-delay: 1s;
  
}
.show_listeners:hover{
  opacity: 1;
}
.show_listeners:active{
  width: 50%;
  height: 50%
}