/*

  Naturally choose your font[s].... and set in body

*/

@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,600');

.raleway-bold { font-family: 'Raleway' !important;  font-weight: 600; }


:root {
  --main-fixed-header: 64px;
  --mobile-fixed-header: 55px;
}

/* e.g., use as var(--main-fixed-header) */


body {
  font-family: 'Raleway', sans-serif;
  overflow-x: hidden;   /* Rarely required */
}

.min-width-1024 { min-width: 1024px; }
.min-width-200 { min-width: 200px; }

/* -------------------------------------------------------*/
/*                 Scroll Bar Stuff                       */
/* -------------------------------------------------------*/

/* html, #DashboardSideBar, #WorkSpaceFiles {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
body::-webkit-scrollbar, #DashboardSideBar::-webkit-scrollbar, #WorkSpaceFiles::-webkit-scrollbar {
  width: 11px;
}
body, #DashboardSideBar, #WorkSpaceFiles {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track, #DashboardSideBar::-webkit-scrollbar-track, #WorkSpaceFiles::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb, #DashboardSideBar::-webkit-scrollbar-thumb, #WorkSpaceFiles::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
} */

::-webkit-scrollbar {
    width: 20px !important;
    background-color: white;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}


/* -------------------------------------------------------*/
/*                    Welcome Page                        */
/* -------------------------------------------------------*/


.home {
  background-color: #fff;
  color: #636b6f;
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
}

.title { font-size: 84px; }
@media only screen and (max-width : 600px) {
  .title { font-size: 64px; }
}

.links > a {
  color: #636b6f;
  padding: 0 25px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.hollow-box {
  margin-top: 10px;
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.5em;
  padding: 10px 25px 10px 25px;   /* top, right, bottom, left */
  border: 3px solid black !important;
  border-radius: 30px;
}

.about-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 400 !important;
  font-size: 1.2rem;
  background-color: #f0f0f0;
}
.normal-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 300 !important;
  font-size: 1rem;
  line-height: 1.55rem !important;
}

.code-text {
  font-family: 'Courier';
  font-size: 1.25rem;
  font-weight: 400;
}

.huge-text { font-size: 4rem;  line-height: 4rem; }
.pin-text { font-size: 3rem; line-height: 3rem; }
.larger-text {  font-size: 1.35rem;  line-height: 1.8rem; }
.very-large-text {  font-size: 2.2rem; line-height: 2.2rem; }
.small-text { font-size: 0.75rem; line-height: 1.15rem; }

@media only screen and (max-width : 600px) {
    i.large { font-size: 3rem; }
    .huge-text { font-size: 2rem;  line-height: 2rem; }
}

.expand-hover:hover {
  font-weight: 600;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  overflow: hidden;
}
.expand-hover {
  font-weight: 200;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  overflow: hidden;
}

.top-of-site {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2;
}

/* -------------------------------------------------------*/
/*                      Generic                           */
/* -------------------------------------------------------*/


/* Rarely used */
.margin-top {margin-top: 50px;}
.margin-left {margin-left: 10%;}
.margin-right {margin-right: 10%;}

/*

  Materialize breaks at 600px [mobile], 992px [tablet] so we hide by default
  and then enable if the screen width fits

*/

.hidden, .invisible { display: none !important; }

/* Default - Desktop */
.not-desktop { display: none !important; }
.desktop-only { display: block !important; }
.desktop-only-inline { display: inline-block !important; }
.tablet-only { display: none !important; }
.mobile-only { display: none !important;}
.mobile-only-block { display: none !important; }

/* Tablet */

@media only screen and (max-width : 992px) {
  .not-desktop { display: inline-block !important; }
  .desktop-only { display: none !important;  }
  .desktop-only-inline { display: none !important; }
  .not-tablet { display: none !important;  }
  .tablet-only { display: inline-block !important; }
}

/* Strict Mobile Phone */

@media only screen and (max-width : 600px) {
  .tablet-only { display: none !important; }
  .not-mobile { display: none !important;  }
  .mobile-only { display: inline-block !important; }
  .mobile-only-block { display: block !important; }

  .cms-body { margin-top: var(--mobile-fixed-header); }
}


/* -------------------------------------------------------*/
/*              General .class styling                    */
/* -------------------------------------------------------*/


.flow-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
	margin-left: 5%;
	margin-right: 5%;
	font-size: 1.2rem;
	line-height: 1.8rem;
}

.page-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
	font-size: 2.5rem;
	line-height: 3rem;
	vertical-align: center;
}

.myh5 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 3.5rem;
  vertical-align: center;
}

.page-alert {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
	font-size: 2rem;
	line-height: 2rem;
	vertical-align: center;
}

.force-thin-text {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200 !important;
}

.dash-box { min-height: 175px; }
.medium-dash-box { min-height: 225px; }
.medium-long-dash-box { min-height: 275px; }
.long-dash-box { min-height: 350px; }
.very-long-dash-box { min-height: 550px; }
.long-select-box { height: 200px; }
.short-select-box { height: 100px; }

.text-center { text-align: center; }
.highlight-var { color: red; font-style: italic; font-weight: bold; }

.hollow-box {
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.5em;
  padding: 20px;
  border: 0.5px solid black;
}

.collapse-button {
  position: absolute;
  right: 0;
  z-index: 99;
}

.sub-collapse-button {
  position: absolute;
  right: 40px;
  z-index: 99;
}

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

  Adjust some Materialize defaults, alas we often need
  !important with Materialize ?  Navigation [Links], Text/Number Input options

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


.body-space { margin-top: 100px; }
.body-no-space { margin-top: 64px; }

nav ul a, nav .my-brand-logo { color: black; }

a:link, a:visited {color: black;}

a:hover .pink-hover { color: #ff00cc !important; /* Hover in Pink */}
a:hover .cyan-hover { color: #00b8d4 !important; /* Hover in Cyan */}
a:hover .teal-hover { color: #53bcb1 !important; /* Hover in  Teal */}
a:hover .purple-hover { color: #9600ff !important; /* Hover in Cyan */}
a:hover .white-hover { color: white !important; /* Hover in White */}
a:hover .black-hover { color: black !important; /* Hover in Black */}

/* a:link .cyan-hover, a:visited .cyan-hover {color: grey;}
a:link .purple-hover, a:visited .purple-hover {color: grey;} */

a:link .my-black, a:visited .my-black  {color: black !important; /* Solid Black Link */}

.pointer { cursor: pointer; }
.chip { color: black !important; }

.my-pink { color: #ff00cc; }
.my-red { color: #d50000; }
.my-red-force { color: #d50000 !important; }
.my-blue-background { background-color: #009688 !important; }
.my-cyan { color: #00e5ff }
.my-cyan-force { color: #00e5ff !important; }
.my-purple { color: #562a75; }
.my-green-force { color: #73bc49 !important; }
.kasssh-green { color: #53bcb1 !important; }
.kasssh-green-background { background-color: #53bcb1 !important; }

.justified { text-align: justify !important; }
.no-wrap { white-space: nowrap; }

.photo-expand {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  overflow: hidden;
}
.photo-reduce {
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  overflow: hidden;
}

.display-number {
  font-size: 2rem !important;
  line-height: 2.5rem !important;
  height: 2.5rem !important;
  width: 100px !important;
}

.simple-number input[type=number] {
  font-size: 1.5rem !important;
  line-height: 2.5rem !important;
  height: 2.5rem !important;
  width: 60px !important;
  padding: 0 !important;
  margin-bottom: : 0rem !important;
  border: solid grey 1px;
}
.simple-number input[type=number]:focus {
  border-bottom: solid grey 1px !important;
  box-shadow: none !important;
}

.short-text input[type=text], .short-text input[type=number] {
  font-size: 1.5rem !important;
  line-height: 2.5rem !important;
  height: 2.5rem !important;
  width: 400px !important;
  padding: 0 !important;
  margin-bottom: : 0rem !important;
  border: solid grey 1px;
}
.short-text input[type=text]:focus {
  border-bottom: solid grey 1px !important;
  box-shadow: none !important;
}

.short-text {
  width: 400px !important;
}

textarea { min-height: 100px; }
.small-input { min-height: 50px; }
.large-input { min-height: 400px; }


/* Input form label + focus color to blue-grey `light` */
.input-field input[type=text]:focus + label {
     color: #b0bec5 !important;
}
.input-field input[type=text] + label {
   color: #b0bec5 !important;
}

.my-tooltip {
  line-height: 1.5em;
}


/* -------------------------------------------------------*/
/*      Make rows and columns ZERO margin/column          */
/* -------------------------------------------------------*/


.row-tight {
  margin-bottom: 0px;
  padding: 0px 0px;
}

/* Override above */
.my-padding {
  padding: 10px !important;
}
.my-padding-left {
  padding-left: 5% !important;
}
.my-padding-input {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.select-box-label {
  position: relative; top: -0.5rem;
}


/* -------------------------------------------------------*/
/*    nav-fixed and slide-out nav-sidebar | Bug Fix       */
/* -------------------------------------------------------*/


.nav-fixed {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  margin-bottom: 0px;
  z-index: 10;
  -webkit-box-shadow: 0 0 0 0;
  box-shadow: 0 0 0 0;
  z-index: 101;
}
.nav-fixed li a:hover {background-color: white; }

.grey-opacity {
  background-color: rgba(0,0,0,0.4) !important;
}

.wide-container {
  margin-left: 5%;
  margin-right: 5%;
}

.my-brand-logo { margin-left: 5%; font-size: 1.2em; }
.my-right-margin { margin-right: 3% !important;}

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down {
    display: none !important;
  }

}

nav a.button-collapse {
  display: inline-block;
}

@media only screen and (min-width: 992px) {
  nav a.button-collapse {
    display: none;
  }
}

/* Mobile ONLY */
@media only screen and (max-width: 600px) {
  .body-no-space { margin-top: 56px; }
}


/* -------------------------------------------------------*/
/*        Materialize | Fix drop Down Down Menus !        */
/* -------------------------------------------------------*/


.dropdown-content {
    margin-top : 63px !important;
    width: 200px !important;
    /* background-color: rgba(0,0,0,0.5) !important; */
    background-color: white !important;
}
.dropdown-content li:hover {
    /* background-color: #e0e0e0 !important; */
    background-color: white !important;
}


/* -------------------------------------------------------*/
/*         Optional Background Gradient Colours           */
/* -------------------------------------------------------*/


.selenium { background: -webkit-linear-gradient(0deg, #3C3B3F 0, #605c3c 100%); }
.mild { background: -webkit-linear-gradient(0deg, #67B26F 0, #4ca2cd 100%); }
.turqouise { background: -webkit-linear-gradient(0deg, #136a8a 0, #267871 100%); }
.mirage { background: -webkit-linear-gradient(0deg, #16222a 0, #3a6073 100%); }
.windy { background: -webkit-linear-gradient(0deg, #acb6e5 0, #86fde8 100%); }
.subu { background: -webkit-linear-gradient(0deg, #0cebeb 0, #29ffc6 100%); }
.portrait {
  background: -webkit-linear-gradient(left, #8e9eab, #eef2f3);
  background: linear-gradient(to right, #8e9eab, #eef2f3);
}
.citrus-peel { background: -webkit-linear-gradient(0deg, #FDC830 0, #F37335 100%); }
.orange-yellow { background: -webkit-linear-gradient(0deg, #F7971E 0, #ffd200 100%); }
.sunkist { background: -webkit-linear-gradient(0deg, #F2994A 0, #F2C94C 100%); }
.sunrise { background: -webkit-linear-gradient(0deg, #FF512F 0, #F09819 100%); }
.margo { background: -webkit-linear-gradient(to right, #ffefba, #ffffff); }


.monochrome {
  -webkit-filter: grayscale(100%) !important; /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) !important;
}

/* -------------------------------------------------------*/
/*                  Overlays | Sliders                    */
/* -------------------------------------------------------*/


.my-popup, .my-error {
  position: fixed;
  z-index: 99;
  background-color: #404040;
  filter: brightness(90%);
  color: white;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(222,222,222,1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(222,222,222,1);
  box-shadow: 10px 10px 5px 0px rgba(222,222,222,1);
  overflow-y: scroll; /* Removes vertical scroll bar */
}
.my-popup-overlay-bottom-corner { z-index: 100; position: fixed !important; bottom: 5px; right: 5px; }

.my-slider {
  position: fixed;
  z-index: 99;
  background-color: white;
  filter: brightness(90%);
  color: black;
  overflow-y: scroll; /* Removes vertical scroll bar */
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}

.my-slider-wide { left: 25%; width: 75%; }

@media only screen and (max-width : 992px) {
  .my-slider { left: 20%; width: 80%; }
}




.extreme-overlay { z-index: 101; }   /* > any file icons */
.carousel-height-300 { height: 300px; }


/* -------------------------------------------------------*/
/*                  Dashboard Styling                     */
/* -------------------------------------------------------*/


#DashboardSideBar {
  position: fixed;
  height: calc(100vh - var(--main-fixed-header));
  overflow-y: scroll;                             /* Allow vertical scroll bar */
}
.controls-inner {
  margin-left: 5%;
}

@media only screen and (max-width : 992px) {
  .controls-inner { margin-left: 20% }
}

@media only screen and (max-width : 600px) {
  /* Very specific iPhone Mobile - ah the joys of mobile and CSS - */
  .controls-inner { margin-left: 10px !important;}
  #DashboardSideBar { height: calc(100vh - var(--mobile-fixed-header)); }
}

.tight-control-box { padding:0px 3px !important; }
@media only screen and (max-width : 992px) {
  .tight-control-box { padding:0px 10px !important; }
}

.pixel-nudge-down-1 { position: relative; top: 5px; }
.pixel-nudge-down-2 { position: relative; top: 3px; }
.pixel-nudge-down-3 { position: relative; top: 10px; }
.form-nudge-down-1 { position: relative; top: 15px; }
.form-nudge-down-2 { position: relative; top: 25px; }
.select-nudge-down-1 { position: relative; top: 35px; }
.nudge-up-form { position: relative; top: -1rem; }
.nudge-down-form { position: relative; top: 1.2rem; }

.searching-spinner {
  position: fixed;
  top: 40%;
  left: 40%;
  right: 40%;
  width: 20%;
  text-align: center;
  z-index: 1501;    /* 1500 used for overlays */
}


/* -------------------------------------------------------*/
/*            Dashboard Calendar Styling                  */
/* -------------------------------------------------------*/


.calendar-cell {
  padding: 15px !important;
  border: 1px black solid;
}

.no-entry {
  cursor: not-allowed;
}


/* -------------------------------------------------------*/
/*                      Tables                            */
/* -------------------------------------------------------*/


.thin-border table, .thin-border tr, .thin-border td  {
  border: 1px solid black;
}

.financial table, .financial tr, .financial td  {
  border-bottom: 1px solid black;
  line-height: 10px;
}

.condensed table, .condensed tbody, .condensed tr, .condensed td {
  line-height: 10px;
  padding: 0px 10px 0px 10px;
}


tr, td {
  color: black !important;
  background-color: FloralWhite !important;
}
.dark-table tr, .dark-table td {
  color: white !important;
  background-color: grey !important;
}
.floral-white { background-color: FloralWhite !important; }


/* -------------------------------------------------------*/
/*                      Images                            */
/* -------------------------------------------------------*/


.full-responsive-image  {
  width: 100%;
}

/* Masonry */

.masonry-image { width: 99%; }

.masonry-grid-sizer, .masonry-grid-item { width: 33%; }

@media only screen and (max-width : 1024px) {
  .masonry-grid-sizer, .masonry-grid-item { width: 50%; }
}

@media only screen and (max-width : 600px) {
  .masonry-grid-sizer, .masonry-grid-item { width: 100%; }
}

/* -------------------------------------------------------*/
/*                      Input                             */
/* -------------------------------------------------------*/

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: teal;
  font-weight: 400;
  opacity: 0.3;
}
::-moz-placeholder { /* Firefox 19+ */
  color: teal;
  font-weight: 400;
  opacity: 0.3;
}
:-ms-input-placeholder { /* IE 10+ */
  color: teal;
  font-weight: 400;
  opacity: 0.3;
}
:-moz-placeholder { /* Firefox 18- */
  color: teal;
  font-weight: 400;
  opacity: 0.3;
}

/* When in focus make the background white */
:focus { background-color: #fff; }

.my-input-box {
  font-size: 1.3em !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  width: 95% !important;
}
.rounded-corner-input-box {
    border-radius: 25px;
    border: 2px solid teal;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    padding-left: 60px !important;
}

.rounded-corners {
    border-radius: 25px;
}

.input-icon-link {
  background-image: url(../images/icon-link.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-image {
  background-image: url(../images/icon-image.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-title {
  background-image: url(../images/icon-title.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-email {
  background-image: url(../images/icon-email.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-padlock {
  background-image: url(../images/icon-padlock.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-padlock-black {
  background-image: url(../images/icon-padlock-black.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-name {
  background-image: url(../images/icon-name.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-name-black {
  background-image: url(../images/icon-name-black.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
.input-icon-hat {
  background-image: url(../images/icon-hat.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}


.my-small-padding { padding: 5px !important; }
.top-rounded-corners {
  border-radius: 30px 30px 0px 0px;
}

textarea, div[contenteditable="true"] {
  color: black !important;
  background-color: white !important;
  padding: 10px;
  border: 1px solid teal;
  border-radius: 0px 30px 30px 30px;
  min-height: 70px;
}
@media only screen and (max-width: 992px) {
  textarea { min-height: 100px; }
}

textarea:focus, div[contenteditable="true"]:focus { outline: none !important; }

.tabs .indicator {
    background-color: black;
}

/* --------- Flex CSS ---------- */

.centered-flex-page {
  display: flex;
  justify-content: center;  /* align horizontal */
  align-items: center;      /* align vertical */
  height: 80vh;             /* Allow for margin-headers */
}