/* Google Material Design Colors */
:root { 
  --primary-light:    #819ca9 !important;
  --primary-main:     #546e7a !important;
  --primary-dark:     #29434e !important; 
  --primary-text:     #ffffff !important;

  --secondary-light:  #ff5c8d !important;
  --secondary-main:   #d81b60 !important;
  --secondary-dark:   #a00037 !important;
  --secondary-text:   #ffffff !important;

  --background-light: #f5f5f5 !important;
  --background-grey:  #e0e0e0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 30px;
    text-align: center;
}

strong { font-weight: 500; }

a, a:hover, a:focus {
	color: #de615e;
	text-decoration: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.bland{
	color:#777 !important;
}

.bland:hover{
	color:#777 !important;
}

.url-normal{
  /*color:#0000EE !important;*/ /* Default blue link color */
  color:rgb(1,145,200) !important; /* INTEGRAL-COLOR SCHEME */
}

.url-normal:hover{
  text-decoration: underline;
}

h1, h2 {
	margin-top: 10px;
	font-size: 38px;
    font-weight: 100;
    color: #555;
    line-height: 50px;
}

h3 {
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
}

img { max-width: 100%; }

::-moz-selection { background: #de615e; color: #fff; text-shadow: none; }
::selection { background: #de615e; color: #fff; text-shadow: none; }


.btn-link-1 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 16px 20px 0 20px;
	background: #de615e;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #fff; }

.btn-link-1.btn-link-1-facebook { background: #4862a3; }
.btn-link-1.btn-link-1-twitter { background: #55acee; }
.btn-link-1.btn-link-1-google-plus { background: #dd4b39; }

.btn-link-1 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 15px 20px 0 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-2:hover, .btn-link-2:focus, 
.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }


/***** Top content *****/

.inner-bg {
    padding: 100px 0 170px 0;
}

.top-content .text {
	color: #fff;
}

.top-content .text h1 { color: #fff; }

.top-content .description {
	margin: 20px 0 10px 0;
}

.top-content .description p { opacity: 0.8; }

.top-content .description a {
	color: #fff;
}
.top-content .description a:hover, 
.top-content .description a:focus { border-bottom: 1px dotted #fff; }

.form-box {
	margin-top: 35px;
}

.form-top {
	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #444;
	background: rgba(0, 0, 0, 0.35);
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0; color: #fff; }
.form-top-left p { opacity: 0.8; color: #fff; }

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #fff;
	line-height: 100px;
	text-align: right;
	opacity: 0.3;
}

.form-bottom {
	padding: 25px 25px 30px 25px;
	background: #444;
	background: rgba(0, 0, 0, 0.3);
	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
	text-align: left;
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #de615e;
}

.social-login {
	margin-top: 35px;
}

.social-login h3 {
	color: #fff;
}

.social-login-buttons {
	margin-top: 25px;
}


/***** Media queries *****/

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) {
	
	.inner-bg { padding: 60px 0 110px 0; }

}

/* Prevent horizontal scrolling for mobile screens */
@media (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


@media (max-width: 415px) {
	
	h1, h2 { font-size: 32px; }

}

/***** NICE HOVER EFFECT *******/

.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

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

body { 
  padding: 45px 0 0 0;
}

.nav-img{
	padding-top: 8px;
	/*padding-left: 4px;*/
}

.nav-menu-spacing{
  /*padding-top: 8px;*/
  padding-left: 10px;
}

.fill {
	max-height: 100%;
	overflow-y: auto;
}

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}


/* bootstrap overrides */

html, body {
    height: 100%;
}

.main, .row-fluid {
    height: 100%;
}

.row-fluid.no-gutter [class*='col-']:not(:first-child),
.row-fluid.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}


.main:before, .main:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.main:after,
.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
    *zoom:1;
}

/*.column .padding {
    padding: 20px;
}*/

.box {
  	bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
  	top:45px;
}

.span9.full {
    width: 100%;
}



.fake-panel-primary {
	border-right: 1px solid var(--primary-main); //#bcaaa4; //rgb(32, 175, 223); // rgb(136, 136, 136); // rgb(0, 204, 153);//#337ab7;
	border-left: 1px solid var(--primary-main);  //#bcaaa4; //rgb(32, 175, 223); // rgb(136, 136, 136); // rgb(0, 204, 153); //#337ab7;
}

.fake-panel-primary > .panel-heading {
  padding-top: 16px;
  color: #fff;
  background-color: var(--primary-main); //#8c7b75 !important;//#bcaaa4 !important; //rgb(32, 175, 223); //rgb(136, 136, 136); //rgb(0, 204, 153); //#337ab7;
  border-color: var(--primary-main); //#bcaaa4 !important; //rgb(32, 175, 223); //rgb(136, 136, 136); //rgb(0, 204, 153); //#337ab7;
}

.fake-panel-secondary {
  border-right: 1px solid #49d1a8; // #7300e6;  
  border-left: 1px solid #49d1a8; // #7300e6;  
}

.fake-panel-secondary > .panel-heading {
  padding-top: 16px;
  color: #fff;
  background-color: #49d1a8; // #7300e6; 
  border-color: #49d1a8; // #7300e6;  
}

/* FLOATING BUTTON */

.btn-floating {
	/*box-shadow: 1px 3px 0 1px rgba(0,0,0,0.1);*/
  box-shadow: 5px 5px 10px 0px rgba(66,66,66,0.2);
}

.stick-bottom {
	position:absolute;
	bottom: 10px;
}

.stick-right{
	position:absolute;
	right: 12px;
}

.stick-top{
	position:absolute;
	top: 4px;
}

.stick-left{
	position:absolute;
	left: 4px;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 6px 11px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 56px;
  height: 56px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

/* Modal header styling */
.modal-header-success {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #5cb85c;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-warning {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #f0ad4e;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-danger {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #d9534f;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-info {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #5bc0de;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-primary {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #428bca;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-integral-main {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    /*background-color: rgb(0, 204, 153); // INTEGRAL COLOR SCHEME*/
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}

.tokenfield {
    text-align: left;
}

.noresize {
  resize: none; 
}

.vresize {
  resize: vertical; 
}
  
.hresize {
  resize: horizontal;  
}  


/* LIST DISPLAY STYLES */
  .event-list {
    list-style: none;
    /*font-family: 'Lato', sans-serif;*/
    margin: 0px;
    padding: 0px;
  }
  .event-list > li {
    border-style:solid;
    border-width: 1px !important;
    border-left:rgb(255,255,255);
    border-right:rgb(255,255,255);
    border-color: var(--primary-dark);//
    rgb(225,225,225);
    padding: 0px;
    min-height: 100;
    min-height: 1;
    /* min-height: 100px; */
    /* overflow: hidden; */
  }
  .event-list > li > time { 
    display: inline-block;
    width: 100%;
    color: rgb(255, 255, 255);
    /*background-color: rgb(146, 218, 194); //rgb(197, 44, 102);*/
    padding: 5px;
    text-align: center;
    /*text-transform: uppercase;*/
  }

  .event-list > li:nth-child(even) > .info {
    background-color: rgb(235,235,235);
  }

  .event-list > li > .info > span
  .event-list > li > time > span {
    display: none;
  }

  .event-list > li > .info > img {
    /*position:relative;*/
    display: block;
    float: right;
    height: 40px;
    margin-top:5px;
    margin-right: -25px;
   }

  .event-list > li > time > .day {
    display: block;
    /*font-size: 16pt;*/
    /*font-weight: 100;*/
    /*line-height: 2.5;*/
    text-align: center;
    vertical-align: middle;
    /*padding-top: 10px;*/
   }
  .event-list > li > time > .month {
    display: block;
    /*font-size: 24pt;*/
    /*font-weight: 900;*/
    /*line-height: 1;*/
  }
  .event-list > li > img {
    width: 100%;
  }
  .event-list > li > .info {
    padding-top: 5px;
    /*text-align: center;*/
  }
  .event-list > li > .info > .title {
    /*    font-size: 14pt;
    font-weight: 700;
    margin: 0px;*/
    margin-top: 4px;
    min-height: 100;
    /* overflow: hidden; */
    /* min-height: 100px; */
    }
  .event-list > li > .info > .desc {
    font-size: 13pt;
    font-weight: 300;
    /*margin: 0px;*/
    margin-top: -10px;
  }
  .event-list > li > .info > ul,
  .event-list > li > .social > ul {
    display: table;
    list-style: none;
    margin: 10px 0px 0px;
    padding: 0px;
    width: 100%;
    text-align: center;
  }
  .event-list > li > .social > ul {
    margin: 0px;
  }
  .event-list > li > .info > ul > li,
  .event-list > li > .social > ul > li {
    display: table-cell;
    cursor: pointer;
    color: rgb(30, 30, 30);
    font-size: 11pt;
    font-weight: 300;
        padding: 3px 0px;
  }
  .event-list > li > .info > ul > li > a {
    display: block;
    width: 100%;
    color: rgb(30, 30, 30);
    text-decoration: none;
  } 
  .event-list > li > .info:hover,
  .event-list > li > .info > ul > li:hover {
    color: rgb(30, 30, 30);
    background-color: rgb(200, 200, 200);
  }
  .event-list > li > .info > ul > li:hover {
    /*color: rgb(30, 30, 30);*/
    background-color: rgb(100, 100, 100);
  }

  @media (min-width: 130px) {
    .event-list > li {
      position: relative;
      display: block;
      width: 100%;
      height: 60px;
      padding: 0px;
    }

    .event-list > li > time,
    .event-list > li > img  {
      display: inline-block;
    }
    .event-list > li > time,
    .event-list > li > img {
      width: 60px;
      float: left;
    }
    .event-list > li > .info {
      background-color: rgb(245, 245, 245);
      overflow: hidden;
      /* min-height: 100px; */
    }
    .event-list > li > time,
    .event-list > li > img {
      width: 80px;
      height: 60px;
      padding: 0px;
      margin: 0px;
    }
    .event-list > li > .info {
      position: relative;
      height: 60px;
      text-align: left;
      padding-right: 10px;
    } 
    .event-list > li > .info > .title, 
    .event-list > li > .info > .desc {
      padding: 0px 10px;
    }
    .event-list > li > .info > ul {
      position: absolute;
      left: 0px;
      bottom: 0px;
    }
  }




/* MATERIALIZE FLOATING BUTTON */
.btn-color-main{
  background-color: var(--secondary-main);  //#c51162 !important; //rgb(255, 0, 102) !important;
}

.btn-color-sub-1{
  background-color: var(--secondary-light); //rgb(0, 153, 255) !important;
  color: #fff !important;
}

.btn-color-sub-2{
  background-color: var(--secondary-main);//rgb(255, 204, 0) !important;
  color: #fff !important;
}

.btn-floating{
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-floating:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn-floating:disabled {
  background-color: #DFDFDF !important;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default;
}

.btn-floating.disabled *,
.btn-floating:disabled * {
  pointer-events: none;
}

.btn-floating.disabled:hover,
.btn-floating:disabled:hover {
  background-color: #DFDFDF !important;
  color: #9F9F9F !important;
}

.btn-floating i {
  font-size: 1.3rem;
  line-height: inherit;
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 37px;
  height: 37px;
  line-height: 37px;
  padding: 0;
  background-color: var(--secondary-main); //#26a69a;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 37px;
}

.btn-floating:hover {
  background-color: var(--secondary-main);#26a69a;
}

.btn-floating:before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 55.5px;
  height: 55.5px;
}

.btn-floating.btn-large i {
  line-height: 55.5px;
}

button.btn-floating {
  border: none;
}

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998;
}

.fixed-action-btn.active ul {
  visibility: visible;
}

.fixed-action-btn.horizontal {
  padding: 0 0 0 15px;
}

.fixed-action-btn.horizontal-right ul {
  /*Expand to the left */
/*  text-align: right;
  right: 64px;
  left: auto;*/

  /* Expand to the right*/
  text-align:left;
  left: 54px;
  right:auto;

  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);          
  height: 100%;    
  width: 500px;
  /*width 100% only goes to width of button container */
}

.fixed-action-btn.horizontal-left ul {
  /*Expand to the left */
  text-align: right;
  right: 64px;
  left: auto;

  /* Expand to the right*/
/*  text-align:left;
  left: 64px;
  right:auto;*/

  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);          
  height: 100%;    
  width: 500px;
  /*width 100% only goes to width of button container */
}

.fixed-action-btn.horizontal ul li {
  display: inline-block;
  margin: 15px 15px 0 0;
}

.fixed-action-btn ul {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
}

.fixed-action-btn ul li {
  margin-bottom: 15px;
}

.fixed-action-btn ul a.btn-floating {
  opacity: 0;
}

/* Lowercase styling*/
.text-lower{
    text-transform: lowercase;
}

.text-overlay {
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
  top:0;
  left:0;
  opacity:1;
  /*background-color:rgba(0,0,0,0.5);*/
}

.text-overlay h2 {
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  position:relative;
  font-size:17px;
  background:rgba(0,0,0,0.5);
  padding:0px;
}

/*INTEGRAL THEME*/

.integral-main{
  background-color: var(--primary-main);  
}
.btn-integral-main{
  background-color: var(--primary-main);
}
.btn-integral-main:hover{
  background-color: var(--primary-dark); 
}

.text-primary{
  color: var(--primary-text);
}
.text-on-primary-light{
  color:black !important;
}

.text-secondary{
  color: var(--secondary-text);
}


.integral-1,
.btn-integral-1{
  background-color: var(--primary-light);  
}
.btn-integral-1:hover{
  background-color: var(--primary-dark); 
}

/*HIGHLIGHT 2*/
.integral-2{
  background-color: var(--primary-light);  
}
.btn-integral-2{
  background-color: var(--secondary-main);  
}
.btn-integral-2:hover{
  background-color: var(--secondary-dark); 
}

.text-integral-4{
  color: var(--secondary-main); //rgb(225,5,45) !important; // INTEGRAL COLOR SCHEME
}

.integral-secondary{
  background-color: var(--secondary-main);  
}


/* TYPEAHEAD STYLING */
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 220px;
  margin-top: 0px;
  padding: 0px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
  color:black;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

.tt-invalid{
  padding: 3px 20px;
  line-height: 24px;
  color: #bfbfbf;
  /*font-style: italic;*/
}

/*video{
  width: 100%    !important;
  height: auto   !important;
}
*/
/*video{
  width: auto    !important;
  height: 300px   !important;
}
*/

/* Swipe positions */
.left-side-swipe{
  position:absolute;
  top:6px;
  margin-left:0px;
  left:0px;
  width:80px;
  height:100%;
  z-index:1000;
}

/*When the screen size is smaller than 768 
  the dt elements will collapse and dl's will take this 
  left offset*/
@media (max-width: 767px) {
  .dl-horizontal-thin dd {
    margin-left: 20px;
  }
}

/*@media (max-width: 359px) {
  .hide-img-xxs {
    display:none;
  }
}*/

@media (max-width: 359px){

.moves ul li img { display: none !important; }

}

@media (max-width: 1199px) {
  .container{ 
    width:100%; 
    padding:0px;
  }
}

@media (max-width: 1199px) {
  .container-integral-navbar{ 
    width:100% !important; 
    padding-left:15px;
/*    background-color: #8c7b75 !important;
    border-color: #8c7b75 !important;  */
  }
}

/* INVERSE DROPDOWN */
.inverse-dropdown{
  background-color: #222;
  border-color: #080808;
  &>li>a{
    color: #999;
    &:hover{
      color: #fff;
      background-color: #000;
    }
  }
  &>.divider {
    background-color: #888;
  }
}

.integral-bg{
  background-color:#e6e6e6;
}

.text-justify-left {
  text-align: justify;
  /*left:100px;*/
}

.inline-tab-left{
  display:inline-block;
  padding-left:20px;
}

.tab-fill{
  /*height:600px;*/
}

.deleterow{cursor:pointer}

.active-integral,
.active-integral a {
  color:white !important;
  background-color: black !important;
}

.inline{
  display:inline !important;
}

/*
Force table width to 100%
*/
table.table-fixedheader {
  width: 100%;
}

/*
Set table elements to block mode.  (Normally they are inline).
This allows a responsive table, such as one where columns can be stacked
if the display is narrow.
*/
table.table-fixedheader,
table.table-fixedheader>thead,
table.table-fixedheader>tbody,
table.table-fixedheader>thead>tr,
table.table-fixedheader>tbody>tr,
table.table-fixedheader>thead>tr>th,
table.table-fixedheader>tbody>td {
  display: block;
}


table.table-fixedheader>thead>tr:after,
table.table-fixedheader>tbody>tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

/*
When scrolling the table, actually it is only the tbody portion of the
table that scrolls (not the entire table: we want the thead to remain
fixed).  We must specify an explicit height for the tbody.  We include
100px as a default, but it can be overridden elsewhere.

Also, we force the scrollbar to always be displayed so that the usable
width for the table contents doesn't change (such as becoming narrower
when a scrollbar is visible and wider when it is not).
*/
table.table-fixedheader>tbody {
  overflow-y: auto;
  max-height: 100px;
}

/*
We really don't want to scroll the thead contents, but we want to force
a scrollbar to be displayed anyway so that the usable width of the thead
will exactly match the tbody.
*/
table.table-fixedheader>thead {        
  overflow-y: scroll;
}

/*
For browsers that support it (webkit), we set the background color of
the unneeded scrollbar in the thead to make it invisible.  (Setting
visiblity: hidden defeats the purpose, as this alters the usable width
of the thead.)
*/
table.table-fixedheader>thead::-webkit-scrollbar{
  background-color: inherit;
}

/*
We want to set <th> and <td> elements to float left.
We also must explicitly set the width for each column (both for the <th>
and the <td>).  We set to 20% here a default placeholder, but it can be
overridden elsewhere.
*/
table.table-fixedheader>thead>tr>th,
table.table-fixedheader>tbody>tr>td {
        width: 20%;
        float: left;
}

.modal-danger{
  background-color:#f2dede;
}

.crop-box{
  /*display: inline; */
  /*left: -24px; */
  /*top: 0px; */
  -webkit-user-select: none; 
  -webkit-user-drag: none; 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
  touch-action: none; 
  pointer-events:none;
  /*width: 248px;*/
}

.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

.circular {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}


/* MOVE SELECTED colored-box color*/
li > .active{
  background-color: var(--primary-dark);  //#8c7b75 !important; //rgb(0,91,154) !important; // INTEGRAL COLOR SCHEME integral-4
}

li > .active-info{
  background-color: rgb(128, 128, 128) !important; // INTEGRAL COLOR SCHEME
}

li > .active-info:hover{
  background-color: rgb(100, 100, 100) !important; // INTEGRAL COLOR SCHEME
}

.active-info{
  color:white;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}

.modal-cv {
  text-align: center;
  padding: 0!important;
}

.modal-cv:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog-cv {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.lg-banner {
  background-color: var(--primary-dark);
  padding-top: 14px;
}

.wrappable{
  word-wrap: break-word !important;
}