/*license:unlicense*/

/*
SHART CSS LIBRARY V1
*/

/*shart-core.css V1*/

/*------------------------*/

body {
    background: #fff;
    color: #1b1b1b;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    padding: 2em 2em 4em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
}

h1 small {
    padding-left: 10px;
    font-size: 20px;
}

h2 {
    margin-top: 1.3em;
}

a {
    color: #0083e8;
}

b,
strong {
    font-weight: 600;
}

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}

/*classes for html tags*/

html.shart-dark-bg {
    background-color: rgb(34, 34, 34);
}

html.shart-black-bg {
    background-color: black;
}

html.shart-white-bg {
    background-color: rgb(255, 255, 255);
}


/*classes for body tags*/

body.shart-fixed-width {
    max-width: 800px;
}

body.shart-dark-bg {
    background-color: rgb(59, 59, 59);
}

body.shart-black-bg {
    background-color: black;
}

body.shart-white-bg {
    background-color: white;
}

body.shart-white-text {
    color: white !important;
}

/*classess for h1, h2, h3, h4, p, a, ...etc... tags*/

.shart-text-sm {
    font-size: 12px;
}

.shart-text-md {
    font-size: 16px;
}

.shart-text-lg {
    font-size: 24px;
}

.shart-text-xl {
    font-size: 30px;
}

.shart-no-underline {
    text-decoration: none;
}

.shart-underline {
    text-decoration: underline;
}

/*------------------------*/

/* shart-grid.css*/

/*------------------------*/

* {
    box-sizing: border-box;
}

.shart-col-1 {
    width: 8.33%;
}

.shart-col-2 {
    width: 16.66%;
}

.shart-col-3 {
    width: 25%;
}

.shart-col-4 {
    width: 33.33%;
}

.shart-col-5 {
    width: 41.66%;
}

.shart-col-6 {
    width: 50%;
}

.shart-col-7 {
    width: 58.33%;
}

.shart-col-8 {
    width: 66.66%;
}

.shart-col-9 {
    width: 75%;
}

.shart-col-10 {
    width: 83.33%;
}

.shart-col-11 {
    width: 91.66%;
}

.shart-col-12 {
    width: 100%;
}

[class*="shart-col-"] {
    float: left;
    padding: 15px;
}

.shart-row::after {
    content: "";
    clear: both;
    display: table;
}

/*------------------------*/

/* shart-navbars.css V1 */

/*------------------------*/

/*default navbar*/

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #111;
}

nav li.active {
    background-color: #111;
}

/*.navbar-white*/

.shart-navbar-white ul {
    background-color: rgb(223, 221, 221) ! important;
}

.shart-navbar-white ul li a:hover {
    background-color: #333 !important;
    color: white;
}

.shart-navbar-white li a {
    color: black;
}

.shart-navbar-white li.active {
    background-color: rgb(138, 138, 138);
    color: white !important;
}

/*.navbar-black*/

.shart-navbar-black ul {
    background-color: black !important;
}

.shart-navbar-black li.active {
    background-color: rgb(68, 67, 67);
}

.shart-navbar-black ul li a:hover {
    background-color: #333 !important;
}

/*------------------------*/

/* shart-colors.css v1*/

/*------------------------*/

/*
basicly, every color you can imagine
*/

.shart-amber,
.shart-hover-amber:hover {
    color: #000!important;
    background-color: #ffc107!important
}

.shart-aqua,
.shart-hover-aqua:hover {
    color: #000!important;
    background-color: #00ffff!important
}

.shart-blue,
.shart-hover-blue:hover {
    color: #fff!important;
    background-color: #2196F3!important
}

.shart-light-blue,
.shart-hover-light-blue:hover {
    color: #000!important;
    background-color: #87CEEB!important
}

.shart-brown,
.shart-hover-brown:hover {
    color: #fff!important;
    background-color: #795548!important
}

.shart-cyan,
.shart-hover-cyan:hover {
    color: #000!important;
    background-color: #00bcd4!important
}

.shart-blue-grey,
.shart-hover-blue-grey:hover,
.shart-blue-gray,
.shart-hover-blue-gray:hover {
    color: #fff!important;
    background-color: #607d8b!important
}

.shart-green,
.shart-hover-green:hover {
    color: #fff!important;
    background-color: #4CAF50!important
}

.shart-light-green,
.shart-hover-light-green:hover {
    color: #000!important;
    background-color: #8bc34a!important
}

.shart-indigo,
.shart-hover-indigo:hover {
    color: #fff!important;
    background-color: #3f51b5!important
}

.shart-khaki,
.shart-hover-khaki:hover {
    color: #000!important;
    background-color: #f0e68c!important
}

.shart-lime,
.shart-hover-lime:hover {
    color: #000!important;
    background-color: #cddc39!important
}

.shart-orange,
.shart-hover-orange:hover {
    color: #000!important;
    background-color: #ff9800!important
}

.shart-deep-orange,
.shart-hover-deep-orange:hover {
    color: #fff!important;
    background-color: #ff5722!important
}

.shart-pink,
.shart-hover-pink:hover {
    color: #fff!important;
    background-color: #e91e63!important
}

.shart-purple,
.shart-hover-purple:hover {
    color: #fff!important;
    background-color: #9c27b0!important
}

.shart-deep-purple,
.shart-hover-deep-purple:hover {
    color: #fff!important;
    background-color: #673ab7!important
}

.shart-red,
.shart-hover-red:hover {
    color: #fff!important;
    background-color: #f44336!important
}

.shart-sand,
.shart-hover-sand:hover {
    color: #000!important;
    background-color: #fdf5e6!important
}

.shart-teal,
.shart-hover-teal:hover {
    color: #fff!important;
    background-color: #009688!important
}

.shart-yellow,
.shart-hover-yellow:hover {
    color: #000!important;
    background-color: #ffeb3b!important
}

.shart-white,
.shart-hover-white:hover {
    color: #000!important;
    background-color: #fff!important
}

.shart-black,
.shart-hover-black:hover {
    color: #fff!important;
    background-color: #000!important
}

.shart-grey,
.shart-hover-grey:hover,
.shart-gray,
.shart-hover-gray:hover {
    color: #000!important;
    background-color: #9e9e9e!important
}

.shart-light-grey,
.shart-hover-light-grey:hover,
.shart-light-gray,
.shart-hover-light-gray:hover {
    color: #000!important;
    background-color: #f1f1f1!important
}

.shart-dark-grey,
.shart-hover-dark-grey:hover,
.shart-dark-gray,
.shart-hover-dark-gray:hover {
    color: #fff!important;
    background-color: #616161!important
}

.shart-pale-red,
.shart-hover-pale-red:hover {
    color: #000!important;
    background-color: #ffdddd!important
}

.shart-pale-green,
.shart-hover-pale-green:hover {
    color: #000!important;
    background-color: #ddffdd!important
}

.shart-pale-yellow,
.shart-hover-pale-yellow:hover {
    color: #000!important;
    background-color: #ffffcc!important
}

.shart-pale-blue,
.shart-hover-pale-blue:hover {
    color: #000!important;
    background-color: #ddffff!important
}

.shart-text-amber,
.shart-hover-text-amber:hover {
    color: #ffc107!important
}

.shart-text-aqua,
.shart-hover-text-aqua:hover {
    color: #00ffff!important
}

.shart-text-blue,
.shart-hover-text-blue:hover {
    color: #2196F3!important
}

.shart-text-light-blue,
.shart-hover-text-light-blue:hover {
    color: #87CEEB!important
}

.shart-text-brown,
.shart-hover-text-brown:hover {
    color: #795548!important
}

.shart-text-cyan,
.shart-hover-text-cyan:hover {
    color: #00bcd4!important
}

.shart-text-blue-grey,
.shart-hover-text-blue-grey:hover,
.shart-text-blue-gray,
.shart-hover-text-blue-gray:hover {
    color: #607d8b!important
}

.shart-text-green,
.shart-hover-text-green:hover {
    color: #4CAF50!important
}

.shart-text-light-green,
.shart-hover-text-light-green:hover {
    color: #8bc34a!important
}

.shart-text-indigo,
.shart-hover-text-indigo:hover {
    color: #3f51b5!important
}

.shart-text-khaki,
.shart-hover-text-khaki:hover {
    color: #b4aa50!important
}

.shart-text-lime,
.shart-hover-text-lime:hover {
    color: #cddc39!important
}

.shart-text-orange,
.shart-hover-text-orange:hover {
    color: #ff9800!important
}

.shart-text-deep-orange,
.shart-hover-text-deep-orange:hover {
    color: #ff5722!important
}

.shart-text-pink,
.shart-hover-text-pink:hover {
    color: #e91e63!important
}

.shart-text-purple,
.shart-hover-text-purple:hover {
    color: #9c27b0!important
}

.shart-text-deep-purple,
.shart-hover-text-deep-purple:hover {
    color: #673ab7!important
}

.shart-text-red,
.shart-hover-text-red:hover {
    color: #f44336!important
}

.shart-text-sand,
.shart-hover-text-sand:hover {
    color: #fdf5e6!important
}

.shart-text-teal,
.shart-hover-text-teal:hover {
    color: #009688!important
}

.shart-text-yellow,
.shart-hover-text-yellow:hover {
    color: #d2be0e!important
}

.shart-text-white,
.shart-hover-text-white:hover {
    color: #fff!important
}

.shart-text-black,
.shart-hover-text-black:hover {
    color: #000!important
}

.shart-text-grey,
.shart-hover-text-grey:hover,
.shart-text-gray,
.shart-hover-text-gray:hover {
    color: #757575!important
}

.shart-text-light-grey,
.shart-hover-text-light-grey:hover,
.shart-text-light-gray,
.shart-hover-text-light-gray:hover {
    color: #f1f1f1!important
}

.shart-text-dark-grey,
.shart-hover-text-dark-grey:hover,
.shart-text-dark-gray,
.shart-hover-text-dark-gray:hover {
    color: #3a3a3a!important
}

.shart-border-amber,
.shart-hover-border-amber:hover {
    border-color: #ffc107!important
}

.shart-border-aqua,
.shart-hover-border-aqua:hover {
    border-color: #00ffff!important
}

.shart-border-blue,
.shart-hover-border-blue:hover {
    border-color: #2196F3!important
}

.shart-border-light-blue,
.shart-hover-border-light-blue:hover {
    border-color: #87CEEB!important
}

.shart-border-brown,
.shart-hover-border-brown:hover {
    border-color: #795548!important
}

.shart-border-cyan,
.shart-hover-border-cyan:hover {
    border-color: #00bcd4!important
}

.shart-border-blue-grey,
.shart-hover-border-blue-grey:hover,
.shart-border-blue-gray,
.shart-hover-border-blue-gray:hover {
    border-color: #607d8b!important
}

.shart-border-green,
.shart-hover-border-green:hover {
    border-color: #4CAF50!important
}

.shart-border-light-green,
.shart-hover-border-light-green:hover {
    border-color: #8bc34a!important
}

.shart-border-indigo,
.shart-hover-border-indigo:hover {
    border-color: #3f51b5!important
}

.shart-border-khaki,
.shart-hover-border-khaki:hover {
    border-color: #f0e68c!important
}

.shart-border-lime,
.shart-hover-border-lime:hover {
    border-color: #cddc39!important
}

.shart-border-orange,
.shart-hover-border-orange:hover {
    border-color: #ff9800!important
}

.shart-border-deep-orange,
.shart-hover-border-deep-orange:hover {
    border-color: #ff5722!important
}

.shart-border-pink,
.shart-hover-border-pink:hover {
    border-color: #e91e63!important
}

.shart-border-purple,
.shart-hover-border-purple:hover {
    border-color: #9c27b0!important
}

.shart-border-deep-purple,
.shart-hover-border-deep-purple:hover {
    border-color: #673ab7!important
}

.shart-border-red,
.shart-hover-border-red:hover {
    border-color: #f44336!important
}

.shart-border-sand,
.shart-hover-border-sand:hover {
    border-color: #fdf5e6!important
}

.shart-border-teal,
.shart-hover-border-teal:hover {
    border-color: #009688!important
}

.shart-border-yellow,
.shart-hover-border-yellow:hover {
    border-color: #ffeb3b!important
}

.shart-border-white,
.shart-hover-border-white:hover {
    border-color: #fff!important
}

.shart-border-black,
.shart-hover-border-black:hover {
    border-color: #000!important
}

.shart-border-grey,
.shart-hover-border-grey:hover,
.shart-border-gray,
.shart-hover-border-gray:hover {
    border-color: #9e9e9e!important
}

.shart-border-light-grey,
.shart-hover-border-light-grey:hover,
.shart-border-light-gray,
.shart-hover-border-light-gray:hover {
    border-color: #f1f1f1!important
}

.shart-border-dark-grey,
.shart-hover-border-dark-grey:hover,
.shart-border-dark-gray,
.shart-hover-border-dark-gray:hover {
    border-color: #616161!important
}

.shart-border-pale-red,
.shart-hover-border-pale-red:hover {
    border-color: #ffe7e7!important
}

.shart-border-pale-green,
.shart-hover-border-pale-green:hover {
    border-color: #e7ffe7!important
}

.shart-border-pale-yellow,
.shart-hover-border-pale-yellow:hover {
    border-color: #ffffcc!important
}

.shart-border-pale-blue,
.shart-hover-border-pale-blue:hover {
    border-color: #e7ffff!important
}


/*------------------------*/

/*shart-fonts.css*/

/*------------------------*/

.shart-font-georgia {
    font-family: georgia;
}

.shart-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.shart-font-comic-sans {
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.shart-font-impact {
    font-family: Impact, Charcoal, sans-serif;

}

.shart-font-lucida-sans-unicode {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.shart-font-tahoma {
    font-family: Tahoma, Geneva, sans-serif;
}

.shart-font-trebuchet {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.shart-font-verdana {
    font-family: "Verdana, Geneva, sans-serif"
}

.shart-font-courier-new {
    font-family: "Courier New", Courier, monospace;
}

.shart-font-lucida-console {
    font-family: "Lucida Console", Monaco, monospace;
}
/*------------------------*/

/*shart-buttons.css*/

/*------------------------*/

.shart-btn {
    background-color: rgb(241, 241, 241);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    color: rgb(0, 0, 0);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.shart-btn:hover{
    background-color: rgb(170, 169, 169);,
}

/*------------------------*/

/*shart-forms.css*/

/*------------------------*/

.shart-input {
    border: none;
    border-bottom: 2px solid rgb(37, 37, 37);
}

/*------------------------*/