@charset "UTF-8";
body.darkmode {
    color-scheme: dark;
}
/* *************** 
 	TYPOGRAPHY 
************  */
.text-title {font-size: 2.5em;}
.text-subtitle {font-size: 2em;}
.text-large {font-size: 1.8em;}
.text-medium {font-size: 1.5em;}
.text-normal {font-size: 1.1em;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.wordwrap {word-wrap: normal;word-break: break-word;}
.left {float: left;}
.right {float: right;}
.center {margin-left: auto; margin-right: auto;}
hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #7f7f7f;
}
h1{font-size: 2.5em;}
h2{font-size: 2em;}
h3{font-size: 1.8em;}
h4{font-size: 1.6em;}
h1 {
	font-weight: 800;
	line-height: 1.1em;
	font-size: 3em;
	line-height: 1.2em;
	margin: 10px 0 10px 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
}

h2 {
	font-weight: 800;
	margin: 0 0 .2125em 0;
	font-size: 2em;
	line-height: 1.2em;
	margin: 10px 0 10px 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
}
h3 {
	font-weight: 700;
	margin: 0 0 .2125em 0;
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 10px 0 10px 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
}
h4 {
	font-weight: 700;
	margin: 0 0 .2125em 0;
	font-size: 1.2em;
	line-height: 1.2em;
	margin: 10px 0 10px 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h5 {
	font-weight: 600;
	margin: 0 0 .2125em 0;
	font-size: 1.15em;
	line-height: 1.2em;
	margin: 10px 0 10px 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p {margin: 0 0 1.5em 0;}
.whitebox p {margin: 0 0 5px 0;}
article p, p {
  margin: 0;
  padding:0;
}

hr {
    border: 0;
    height: 1px;
    background: #949494;
    background-image: linear-gradient(to right, #ccc, #b1b1b1, #ccc);
    width: 80%;
    margin: auto;
}
/* ****************
     TITLES (spesific for uses)
***************** */

#sidebar h1 {font-size: 1.5em;}
#sidebar h2 {font-size: 1.3em;}

/* *************** 
 	LINKS 
************  */
a, a:visited {color: black; text-decoration: underline;}
a:hover {text-decoration: underline;}
.social-link a { text-decoration: none;}
.social-link a:hover {text-decoration: none; color:white;}
.darkbox a, a:visited { color: silver; text-decoration: underline;}
.darkbox a:hover { color: white; text-decoration: none;}
.whitebox a, a:visited { color: black; text-decoration: underline;}
.whitebox a:hover { color: gray; text-decoration: none;}


/* *************** 
 	BUTTONS 
************  */

.disabled { pointer-events: none;cursor: default;}

.padding {padding: 5%;}


/* buttons */

input[type="button"], input[type="reset"], input[type="password"], input[type="text"], input[type="submit"] {}




textarea, select, button {
    border: 1px solid silver;
    padding: 6px 15px 6px 11px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.9em;
    border: 1px solid #b1b1b1;

 }  
 textarea {font-size: 1em;}

input, button, select, textarea {
    word-wrap: normal;
    word-break: normal;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #d2d2d2;
}


 input[type] {
    border: 1px solid #b1b1b1;
    border-radius: 5px;
    width: auto;
    background-repeat: no-repeat;
    padding: 6px 15px 6px 15px;
    box-sizing: border-box;
 }   


 input[type]:hover {
	background-color: #efefef;
}


.btn {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 5px 15px 5px 15px;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.btn {
    background-color: transparent;
    border: 1px solid silver;
    text-align: center;
  	-webkit-transition: background-color 300ms linear;
  	-ms-transition: background-color 300ms linear;
  	transition: background-color 300ms linear;
}
.button {
    background-color: transparent;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 8px;
    min-width: 100px;
    text-align: center;
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}

.btn-block, .button-block {
    display: block;
    width: 100% !important;
}

button {
	background-color: transparent;
    border: 1px solid silver;
}
.btn:hover, .button:hover, button:hover {
    background-color: #efefef;
}
.button-small {
	min-width: auto;
}

.button-regular {
  background: transparent;
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px 20px 5px 20px;
    min-width: 100px;
}
.button-big {
    padding: 15px 20px 15px 20px;
    min-width: 200px;
    border: 1px solid white;
    border-radius: 5px;
    background-color : #ffffff24;
}
.button-medium {
  background-color : transparent;
    border: 1px solid white;
    border-radius: 5px;
    padding: 10px 15px 10px 15px;
    min-width: 150px;
}

.button-black {
	background-color : transparent;
    border: 1px solid black;
    color: black;
}

.button-gray {
    background-color : transparent;
    border: 1px solid #cccccc;
    color:#cccccc;
}
.button-blue {
    background-color : transparent;
    border: 1px solid #2db2ea;
    color:#cccccc;
}
.button-white {
    background-color : transparent;
    color:white;
}
.button-red {
    border: 1px solid #f33535;
    background-color : transparent;
    color:#cccccc;
}

.button-red-solid {
    border: 1px solid #f33535;
    background: #dc1212;
    color:#fff;
}

.hover-white:hover, .button-black:hover {
  background-color : black;
  color: white;
}

.hover-white:hover, .button-white:hover {
  background-color : #cccccc;
  color: black;
}

.hover-gray:hover, .button-gray:hover {
  background-color : #e8e8e8;
  color: black;
}
.hover-blue:hover, .button-blue:hover {
  background-color: #2db2ea;
  border: 1px solid #2db2ea;
  color: white;
}


.button-gray {
    background: transparent;
    border: 1px solid #cccccc;
    color:#cccccc;
}
.button-dark {
    background: transparent;
    border: 1px solid black;
    color:black;
}
.button-blue {
    background: transparent;
    border: 1px solid #2db2ea;
    color:#cccccc;
}

.dark-blue:hover, .button-dark:hover {
  background: black;
  border: 1px solid black;
  color: white;
}

.hover-gray:hover, .button-gray:hover {
  background: #e8e8e8;
  color: black;
}
.hover-blue:hover, .button-blue:hover {
  background: #2db2ea;
  border: 1px solid #2db2ea;
  color: white;
}

.hover-red:hover,.button-red:hover {
    background: #dc1212;
    color: white;
}
.button-red-solid:hover {
    background: red;
    color: white;
}





/* ************************************
      CSS QUICK THEME TOOLS
************************************** */
.rounded-small {}
.rounded-normal {}
.rounded-big {}
.rounded-huge {}

/* positions */
.resonsive {width:100%;height:auto;}
.center {}
.middle {}
.left {}
.right {}
.top {}
.bottom {}

/* animate  */
.animate {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.smooth {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 1px;
}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.inlineblock { display: inline-block;}
.block { display: block;}
.inline {display: inline;display: inline-block;}
/* boxes */
.darkbox {
	background: #161616;
	margin: 0;
	color: silver;
	padding: 5px;
}
.darkbox h2, .darkbox h3, .darkbox h4, .darkbox b, .darkbox strong { color:white;}

.graybox {
	background: #404040;
	margin: 0;;
	color: silver;
	padding: 5px;	
}
.lightgraybox {
	background: #7f7f7f;
	margin: 0;
	color: silver;
	padding: 5px;
}
.whitebox {
    background: #fbfbfb;
    margin: 0;
    border: 1px solid #c1c1c1;
    padding: 5px;
}
/* gradients  */
.gray-gradient {
	background-color: #f5f5f5;
    border: 1px solid #c1c1c1;
	/*
	background: -webkit-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -moz-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -o-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -ms-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f5f7', endColorstr='#cfd1d4',GradientType=0 );
	border: 1px solid #949494;
	-webkit-box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	*/
}

button.gray-gradient, .btn.gray-gradient {
    background: white;
}



.darker-gradient {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(43,43,43,1)), color-stop(100%, rgba(22,22,22,1)));
	background: -webkit-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -o-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -ms-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: linear-gradient(to bottom, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}
.dark-gradient {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(75,75,75,1)), color-stop(100%, rgba(43,43,43,1)));
	background: -webkit-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -o-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: linear-gradient(to bottom, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );

}
.dark-gradient {color: silver;}
.dark-gradient a, .dark-gradient a:visited , .dark-gradient a:active { color:silver !important;}
.dark-gradient a:hover{ color:white !important;}

button.dark-gradient {color:silver;}
button.dark-gradient:hover { color:white;}

.dark-gradient2 {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(43,43,43,1)), color-stop(100%, rgba(75,75,75,1)));
	background: -webkit-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -o-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -ms-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: linear-gradient(to bottom, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}
.darker-gradient2 {
	background: rgba(22,22,22,1);
	background: -moz-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(22,22,22,1)), color-stop(100%, rgba(43,43,43,1)));
	background: -webkit-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -o-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: linear-gradient(to bottom, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}

.dark-gradient2 {color: silver;}
.dark-gradient2 a, .dark-gradient2 a:visited , .dark-gradient2 a:active { color:silver !important;}
.dark-gradient2 a:hover{ color:white !important;}

button.dark-gradient2 {color:silver;}
button.dark-gradient2:hover { color:white;}

.blue-gradient {
background: #7abcff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-8 */

}
.red-gradient {
	background: #ff3019; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNmZjMwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2YwNDA0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #ff3019 46%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(46%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3019 46%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-8 */
}

/* quick tools for paddings and margins */
.padding {padding: 5px;}
.padded {padding: 5%;}

.no-padding {padding:0;}
.no-margin {margin:0;}

/* BOX STYLES */
.rounded {border-radius: 6px;padding: 5% 5%;}
.space {margin-top: 10px;margin-bottom: 10px;}
.space-top {margin-top: 10px;margin-bottom: 0px;}
.space-bottom {margin-top: 0px;margin-bottom: 10px;}
.big-space {margin-top: 20px;margin-bottom: 20px;}
.padding{ padding:5%;}
.shadow {
	-moz-box-shadow:2px 2px 1px rgba(50, 50, 50, 0.75);
	-webkit-box-shadow:2px 2px 1px rgba(50, 50, 50, 0.75);
	box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75);
}

.bigshadow {
	-webkit-box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
}

.hugeshadow {
	-webkit-box-shadow: 0px 14px 40px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 14px 40px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 14px 50px 0px rgba(0,0,0,0.75);
}


/************************
/* theme colors  - must be bottom of CSS to be overrides : todo -> should prob imported LAST

/* common colors */
.green {color: green !important;}
.red {color: red !important;}
.blue {color: blue !important;}
.orange {color: orange !important;}
.cyan {color: cyan !important;}
.magenta {color: magenta !important;}
.gray {color: silver !important;}
.black {color: black !important;}
.white {color: white !important;}

.clickable {cursor: pointer;}

/* ************************ */
.text-black {color:#161616;}
.text-dark {color:#404040;}
.text-gray {color: #4b4b4b;}
.text-light {color:#7f7f7f;}
.text-white {color:white;}
.text-red {color:red;}
.text-blue {color:#00abeb;}
.text-blue {color: #2db2ea;}
.text-orange {color:#fb9600;}
.text-green {color:#37c229;}
.text-black {color:#161616;}
.text-dark {color:#404040;}
.text-gray {color: #4b4b4b;}
.text-light {color:#7f7f7f;}
.text-white {color:white;}
.text-red {color:red;}
.text-blue {color:#00abeb;}
.text-orange {color:#fb9600;}
.text-green {color:#37c229;}

.text-shadow-white { text-shadow: 0px 2px 3px #fff;}
.text-shadow-dark { text-shadow: 0px 2px 3px #404040;}
.text-shadow-light { text-shadow: 0px 2px 3px #7f7f7f;}

.background-black {background:#161616;}
.background-dark {background:#404040;}
.background-gray {background: #4b4b4b;}
.background-light {background:#7f7f7f;}
.background-white {background:white;}
.background-red {background:red;}
.background-blue {background:#00abeb;}
.background-orange {background:#fb9600;}
.background-green {background:#37c229;}


.border-black {border:#161616 1px solid;}
.border-dark {border:#404040 1px solid;}
.border-gray {border: #4b4b4b 1px solid;}
.border-light {border:#7f7f7f 1px solid;}
.border-white {border:white 1px solid;}
.border-red {border:red 1px solid;}
.border-blue {border:#00abeb 1px solid;}
.border-orange {border:#fb9600 1px solid;}
.border-green {border:#37c229 1px solid;}


.underline-black {border-bottom:#161616 1px solid;}
.underline-dark {border-bottom:#404040 1px solid;}
.underline-gray {border-bottom: #4b4b4b 1px solid;}
.underline-light {border-bottom:#7f7f7f 1px solid;}
.underline-white {border-bottom:white 1px solid;}
.underline-red {border-bottom:red 1px solid;}
.underline-blue {border-bottom:#00abeb 1px solid;}
.underline-orange {border-bottom:#fb9600 1px solid;}
.underline-green {border-bottom:#37c229 1px solid;}


.clearline { display:block; width: 100%;}

/* font size and space */
.text-small {font-size: 0.750em;}
.text-normal {font-size: 1.000em;}
.text-large {font-size: 1.333em;}
.text-big {font-size:1.667em}
.text-huge {font-size:2.000em}

.text-spaced { text-align: justify;}
.text-upper {text-transform: uppercase;}
.text-lower {text-transform: lowercase;}
.text-capitalize {text-transform: capitalize;}
.text-spaced {text-align:justify center;text-justify:inter-word;}
.text-fill {text-align: justify;}
.text-center { text-align: center;}
.text-bold {font-weight: bold;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}


/* center positioning  */
/* todo : needs more testing */

.center {margin-right: auto;margin-right: auto;}
.right {float:right;}
.left {float:left;}

p.center {
	min-width: 60%;
	margin: 2% 20% 2% 20%;
	height: auto;
}
.center-vertical {}
section.center {flex: 1;}
article.center_old {
	min-height: 10em;
	display: table-cell;
    vertical-align: middle;
}

.auto-center {
	display: block;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

/*************
 BUTTONS 
************* */

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success { background: #37c229; /* this is a green */}
.button-error { background: rgb(202, 60, 60); /* this is a maroon */}
.button-warning { background: #fb9600;; /* orange */}
.button-secondary {background: #00abeb; /* this is a light blue */}

/* ************************
	RESPONSIVE HELPERS
************************** */
.responsive {width: 100%;height:auto;}
.width-100 {width: 100% !important; }
.width-95 {width: 95% !important;}
.width-90 {width: 90% !important;}
.width-85 {width: 85% !important;}
.width-80 {width: 80% !important;}
.width-75 {width: 75% !important;}
.width-70 {width: 70% !important;}
.width-65 {width: 65% !important;}
.width-60 {width: 60% !important;}
.width-55 {width: 55% !important;}
.width-50 {width: 50% !important;}
.width-45 {width: 45% !important;}
.width-40 {width: 40% !important;}
.width-35 {width: 35% !important;}
.width-30 {width: 30% !important;}
.width-25 {width: 25% !important;}
.width-20 {width: 20% !important;}
.width-15 {width: 15% !important;}
.width-10 {width: 10% !important;}
.width-5 {width: 5% !important;}

.minwidth-100 {min-width: 100% !important; }
.minwidth-95 {min-width: 95% !important;}
.minwidth-90 {min-width: 90% !important;}
.minwidth-85 {min-width: 85% !important;}
.minwidth-80 {min-width: 80% !important;}
.minwidth-75 {min-width: 75% !important;}
.minwidth-70 {min-width: 70% !important;}
.minwidth-65 {min-width: 65% !important;}
.minwidth-60 {min-width: 60% !important;}
.minwidth-55 {min-width: 55% !important;}
.minwidth-50 {min-width: 50% !important;}
.minwidth-45 {min-width: 45% !important;}
.minwidth-40 {min-width: 40% !important;}
.minwidth-35 {min-width: 35% !important;}
.minwidth-30 {min-width: 30% !important;}
.minwidth-25 {min-width: 25% !important;}
.minwidth-20 {min-width: 20% !important;}
.minwidth-15 {min-width: 15% !important;}
.minwidth-10 {min-width: 10% !important;}
.minwidth-5 {min-width: 5% !important;}

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

.height-20px {height: 20px !important;}
.height-30px {height: 30px !important;}
.height-40px {height: 40px !important;}
.height-50px {height: 50px !important;}
.height-60px {height: 60px !important;}

/* align */
.valign-middle { vertical-align: middle;}
.valign-top { vertical-align: top;}
.valign-bottom { vertical-align: bottom;}

/* IMAGES */
img.round-corners{
	border:1px solid;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

/* ************************************
      Theme switch  
************************************** */
#theme-switch { float: right;margin-right: 5px; position: relative;}
#themetoggle {
  background: transparent;
  background-color: transparent;
  border-radius: 20px;
  cursor: pointer;
  visibility: hidden;
  height: 20px;
  width: 46.6px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 4;
}
#themetoggle::before, #themetoggle::after {
  content: "";
  display: block;
  transition: 0.1s all ease-in-out;
  visibility: visible;
}
#themetoggle::before {
  background: transparent;
  border: 2px solid #111115;
  border-radius: 20px;
  height: inherit;
  width: inherit;
}
#themetoggle::after {
  background: #111115;
  border-radius: 12px;
  height: 12px;
  width: 20px;
  position: absolute;
  top: 4px;
  left: 4px;
}
#themetoggle:checked::before {
  background: #111115;
  border: 2px solid #EEE;
}
#themetoggle:checked::after {
  background: #EEE;
  left: 22.6px;
}
input#themetoggle {
    width: 42px !important;
    height: 16px !important;
}
.themeswitch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.themeswitch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.switchslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f1f1;
  -webkit-transition: .4s;
  transition: .4s;
}
.switchslider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: #9c9c9c;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .switchslider {background-color: #464646;}
input:focus + .switchslider {box-shadow: 0 0 1px #2196F3;}
input:checked + .switchslider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}
.switchslider.switchround {border-radius: 24px;}
.switchslider.switchround:before {border-radius: 50%;}
/* ************************************
      Login bar 
************************************** */
div.loggedbar_avatar {
    float: left;
    margin-right: 15px;
    border: 2px solid white;
    height: 40px;
    width: 40px;
}
.loggedbar_who {float: left;margin-right: 40px;}
.loggedbar_name {
    float: left;
    font-weight: 600;
    font-size: 1em;
    margin-top: 4px;
}
.loggedbar_date{
    clear:left;
    float: left;
    font-size:0.7em;
    color: #848484;
}
.loggedbar_buttons_group {width:auto}
.loggedbar_buttons { float: left;margin-top:1px;}
.loggedbar_buttons {width: auto;min-width: 150px;}
#logged_signout {float: right;}
.badge {background-color: #2DB2EA;}
.btn-group.loggedbar_buttons {
    display: inline-block;
    margin-right: 20px;
    float: left;
}
.container-fluid { padding: 0;}
.loggedbar_buttons_group div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: left;
}
.loggedbar_buttons_group a  {
    text-decoration: none;
    color: #4e4e4e;
}

.darkmode .loggedbar_buttons_group a {

}
.bar_loggedin .btn.gray-gradient {font-size: 1em;}
#loggedbuttons .btn, #loggedbuttons button {
  display: block; 
  width: 80%; 
  float: left; 
  box-sizing: 
  border-box;
  background: none;
  border: 0;
  border-left: 1px solid #d8d8d8;
  border-radius: 0;
}

.darkmode #loggedbuttons .btn, .darkmode #loggedbuttons button {
  border-left: 1px solid #444444;
}

#loginbar_quicksign {
    float: left;
    display: block;
    line-height: 3em;
    display: inline-block;
}

.box {
    background: #f5f5f5;
    border: 1px solid #c5c5c5;
    margin-bottom: 10px;
    box-sizing: border-box;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    width: 100%;
    position: relative;
}
.darkmode .box {background:#2d2e2f;border: 1px solid #151515;}
.boxcontent {margin: 20px;}

/* *************** 
  THEME COLORS - for future pages and as overides (bottom css page)
************  */
.color-bg-page {background-color: #e2e2e2;}
.color-bg-box  {background-color: #e2e2e2;}
.color-bg-box2 {background-color: #f5f5f5;}
.color-bg-box3 {background-color: #f1f1f1}
.color-bg-title {}
.color-bg-active {}

.color-border {}
.color-border-dimmed {}

.color-text {}
.color-text-bright {}
.color-text-dimmed {}
.color-text-active {}

.color-info {}
.color-warning {}
.color-error {}

/* ---- */
.darkmode .color-bg-page {}
.darkmode .color-bg-box  {}
.darkmode .color-bg-box2 {}
.darkmode .color-bg-box3 {}



/* *************** 
  DARKMODE
************  */
.darkmode, .darkmode h1.toptitle { color:#b7b7b7;}
.darkmode, .darkmode #outer-wrapper, .darkmode #inner-wrapper {background-color:#232425;}
.darkmode .gray-gradient {background-color:#2d2e2f;border: 1px solid #151515;}
.darkmode button.gray-gradient, .darkmode .btn.gray-gradient {
    background: #272829;
    color: #9e9e9e;
    border: 1px solid #191919;
}
.darkmode .dark-gradient {
	background: #272829;
    box-sizing: border-box;
    border: 1px solid #1f1f1f;
}
.darkmode a, .darkmode a:visited {color: #b8babb;}
.darkmode a:hover {color: #dddddd;}
.darkmode .whitebox a, .darkmode a:visited {color: #989898;}
.darkmode span.topic_content a, .darkmode span.topic_content a:visited {color: #3695cc;}
.darkmode input, .darkmode select, .darkmode textarea {
	background: #262728;
    border: 1px solid #1d1d1d;
}

.darkmode input[type] {background: #262728;border: 1px solid #1d1d1d;}
.darkmode input:focus {
    outline: none;
    border-color: #444444;
    box-shadow: none;
}
.darkmode input[type]:hover, .darkmode input[type]:active, 
.darkmode input[type]:focus-within, .darkmode input[type]:focus-visible {
    background-color: #1f1f1f;
}
.darkmode textarea, .darkmode select {
    background: #262728;
    border: 1px solid #151515;
    box-sizing: border-box;
    color: silver;
}
.darkmode .titlebar {color:silver;background:#393a3c;}
.darkmode .darkbox h2, .darkmode .darkbox h3, 
.darkmode .darkbox h4, .darkmode .darkbox b, 
.darkmode .darkbox strong {
    color: silver;
}
.darkmode div.loggedbar_avatar { border: 2px solid #272727;}

.darkmode .btn:hover, .darkmode .button:hover, .darkmode button:hover {
  background-color: #262829;
}

.darkmode hr {background-image: linear-gradient(to right, #545454, #5c5c5c, #545454);}

.darkmode pre {
    background-color: #1f2021;
    color: #b9b9b9;
    border-color: #040404;
}

.darkmode table.vdj {border-color: #303030;}
.darkmode table.vdj th {background-color: #2a2b2c;color: silver;}
.darkmode table.vdj tr.r0 td {background-color: #2a2b2c;border-color: #161616;}
.darkmode table.vdj tr.r1 td {background-color: #252728;border-color: #161616;}
.darkmode table.vdj a {color: #dbdbdb;}

.darkmode section#teamsearch article {
    background: #323334;
    border-color: #1f2021;
}

/* Buy page (default view )*/
#bb_top,#bb_topbiz {box-shadow: 0px -6px 10px #2d2b2b;}
#buybox_lower {box-shadow: 0px -2px 8px 2px #2d2b2b;}
#buybox_wing_left, div#buybox_wing_right {box-shadow: 0px 1px 4px #2d2b2b;}
#buybox_wing_left, div#buybox_wing_right {
  background: #232323;
    border: 1px solid #383737;
}
#buybox_wings h3 { color: #848282;}
span.buyicons.karaokeplan,span.buyicons.videoplan,span.buyicons.audioplan {
    background-color: #1d1c1d;
}
#buybox_lower { background: #1f1e1f; border: 1px solid #383838;}
#bottom_comparison {background: #1f1e1f; border-top: 1px solid #383838;}
span.buyicons_text { color: #a0a0a0;}
#buy2018 button.btn {
    background: #292929;
    border: 1px solid #565656;
    color: silver;
}
.bb_proplus_text {color: #9a9a9a;}
#bb_bottom {background: #212021;}
div#downloadpage_v8text button, div#buybox button {border: 1px solid black;}
span.buyicons.hardware, span.buyicons.justicon {
    background-color: #151515;
    border: 1px solid #585858;
}
#bottom_wings,#bottom_comparison,#bb_alttext {color: #828282;}
#business-choice, #discountform {color: black;}
.buyblue-text {color: #3695cc;}
.buyred-text {color: #e43838;}
#business-choice #buycategory_icons span,#discountform #buycategory_icons span {background-color: #fbfbfb;}
#discountform input[type] {
    background:white;
    color: black;
}
span.buyicons.hardware img {
    filter: brightness(1.3);
}
#buybox_wings {
    margin-top: -400px;
    padding-bottom: 420px;
}
@media only screen and (max-width: 1180px) {
  #buybox_wings { padding-bottom: 50px;}
}
@media only screen and (max-width: 1180px){
  #buybox_wings, #buybox_extras {margin-top: 30px;height: auto;}
}

span.codetoclipboard {
    float: right;
    margin-top: -25px;
    margin-right: 10px;
    padding: 0 5px 0 5px;
    background: #3a3a3a;
    border: 1px solid black;
    cursor: pointer;
    font-size: 0.8em;
    color: #878787;
}