﻿/* Move down content because we have a fixed navbar that is 50px tall */
body {
 padding-top: 60px;
 padding-bottom: 20px;
 font-size: 12px;
 color: #666666;
 overflow: hidden;
}
footer { position: absolute; bottom: 0; left: 0; background: #f8f8f8; width: 100%; padding: 10px 0 0 10px; }
a {
    color: #f48b50;
    text-decoration: none;
}
#adminedit, #MC_adminedit {
    padding: 5px 10px;
    background: #FFFFFF;
    width: 99.4%;
    overflow: hidden;
}
.container {
 max-width: 100%;
 margin-left: 0px;
}

.adminOnlyVisible{
 display:none!important;
}
.adminOnlyEnabled{
 pointer-events:none!important;
}
/*.container.admin .adminOnlyVisible, .container.validation .adminOnlyVisible  {
 display:inline-block!important;
}*/
.container.admin .adminOnlyVisible, .container.validation #BTN_SaveAlert.adminOnlyVisible  {
 display:inline-block!important;
}
.container.admin .adminOnlyEnabled, .container.validation .adminOnlyEnabled  {
 pointer-events:auto!important;
}

.smallFont_Underline { font-size: 0.8em; margin-top: -3px; opacity: 0.7;}

.hidden{
 display:none;
}
.hideCol{
 display:none;
}

/*#region Tooltips */
.tooltip {
 position: relative;
 display: inline-block;
  cursor: help;
}

 .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
 }

  .tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #555 transparent transparent transparent;
  }

 .tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
 }
  .tooltip .trigger {
   font-size: 1.5em;
    vertical-align: top;
    opacity: 0.5;
  }
  .tooltip .content {
  width: 350px;
  background-color: #f3f3f3;
  color:#5D7B9D;
  font-weight: 300;
  padding: 10px 10px 10px 10px;
  border: dotted 1px #5D7B9D;
  border-radius: 8px 8px 8px 0;
  text-transform: none;
  position: fixed;
  display: none;
  overflow: hidden;
  transform: translate(0,-100%);
  -webkit-box-shadow: -1px 1px 2px 0px rgba(0,0,0,0.3);
  box-shadow: -1px 1px 2px 0px rgba(0,0,0,0.3);
  z-index: 1000;
 }

 .tooltip.auto .content {
  transform: translate(-5px,-2px);
 }
  .tooltip .content ul {
  padding-left:20px;
 }
  .tooltipVisible {
  display: inline-block !important;
  text-align: left !important;
 }



/*#endregion */

/*#region Navbar */
.navbar{
 padding: 5px 0;
}

/*.navbar-nav{
 display: none;
}*/

.navbar-nav img, .navbar-nav input {     max-height: 20px;    max-width: 20px;    width: 3.5vw;    height: 3.5vw; }

.navbar.admin{
  /*background-color: #e65200;*/
  background-color:#484848;
  z-index: 100002;
  border-width: 3px 0 0 0;
  border-color: #f48b50;
}
.navbar.admin a{
  color: white!important;
}

.navbar-header{
 width: 100px;
}
.navbar-title{
 
 padding-top: 17px;
    padding-bottom: 15px;
    display: inline-block;
    line-height: 16px;
    text-align: center;
    /* width: 300px; */
    /* background: yellow; */
    /* margin: auto; */
    position: absolute;
    /*left: 45%;
    transform: translate(-50%, 0%);*/
    right: 20px;
    top: 5px;
}
.navbar-title .top{
    font-size: 22px;
    font-weight: 900;
    font-style:italic;
 color:#1D2830 ;
 
}
.navbar-title .bottom{
 font-family: 'Open Sans';
    font-size: 11px;
    font-weight: 400;
    color:#273b47 ;
    color:#f48b50 ;
 display: inline-block;
    line-height: 9px;
    text-align: left;
    font-style: italic;
}
.navbar-brand.logo {
 background-image:url(../images/shapelogo.png);    
 background-size: contain;
 background-repeat: no-repeat;
 width:100%;
 height:50px;
 margin-left: -5px!important;
}

.uplimg, .small-icon {
    width: 23px;
    cursor: pointer;
    padding: 0px 3px 0px 3px;
    top: 1px;
    right: -23px;
    vertical-align: top !important;    
    margin-bottom: 4px;
}
h5, h6 {
    margin: 2px;
    font-weight: 400;
    font-size: 1em;
    display: inline-block;
}

/*#endregion */

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
 padding-left: 15px;
 padding-right: 15px;
}


/* Set widths on the form inputs since otherwise they're 100% wide */
/*#region Controls */

input[type=text], select, textarea, input[type=password] {
 font-size: inherit;
 padding: 3px 5px;
 margin: 1px 2px 1px 1px;
 border: 1px solid #e8e8e8;
 width: 90%;
}

select::-ms-expand {
 display: none;
}

select, .fakeSelect {
 border-radius: 1px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-appearance: none;
 -moz-appearance: none;
}

select, .fakeSelect {
 background-position: calc(100% - 8px), calc(100% - 4px), calc(100% - 1.6em) calc(0.8em), calc(0.8em), 0em;
 background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to top, #fff 0%, #eef5fd 50%, #fff 100%);
 background-size: 4px 3px, 4px 3px, 1px 1.9em;
 background-repeat: no-repeat;
 padding-right: 20px;
}

 select:focus, .fakeSelect:focus {
  background-image: linear-gradient(45deg, gray 50%, gray 50%), linear-gradient(135deg, gray 50%, gray 50%), linear-gradient(to top, #fff 0%, #eef5fd 50%, #fff 100%);
  background-position: calc(100% - 7px) 0.9em, calc(100% - 5px) 0.9em, calc(100% - 1.6em) 0em;
  background-size: 4px 1px, 4px 1px, 1px 1.9em;
  background-repeat: no-repeat;
 }

 select:disabled, .fakeSelect:disabled {
  background-image: linear-gradient(45deg, #d1d1d1 50%, #d1d1d1 50%), linear-gradient(135deg, #d1d1d1 50%, #d1d1d1 50%), linear-gradient(to top, #fff 0%, #eef5fd 50%, #fff 100%);
  background-position: calc(100% - 7px) 0.9em, calc(100% - 5px) 0.9em, calc(100% - 1.6em) 0em;
  background-size: 4px 1px, 4px 1px, 1px 1.9em;
 }
input.center {
 text-align:center;
}

input[type="submit"], input[type="button"], .button {
 border: 1px inset #cccccc;
 cursor: pointer;
 font-weight: 400;
 font-size: inherit;
 background: #f48b50;
 color: #FFFFFF;
 text-align: center;
 padding: 6px 15px;
 text-transform: uppercase;
}



input[type=checkbox] {
 -ms-transform: scale(1.3); /* IE */
 -moz-transform: scale(1.3); /* FF */
 -webkit-transform: scale(1.3); /* Safari and Chrome */
 -o-transform: scale(1.3); /* Opera */
 height: 12px;
 vertical-align: middle;
 margin: -2px 0 0;
}

input[type="radio"] {
 width: 15px;
 height: 15px;
}

 input[type="radio"] ~ label, input[type="checkbox"] ~ label {
  margin-right: 5px;
  margin-left: 3px;
  line-height: 20px;
  font-weight: normal;
  margin-bottom: 0;
 }

.RbtList {
}

 .RbtList td {
  border: none !important;
  padding: 0 !important;
  width: auto !important;
 }

 .RbtList input, .RbtList label {
  vertical-align: middle !important;
  font-size: 10.5px !important;
  line-height: 15px !important;
 }

  .RbtList input[type="radio"] {
   width: 12px;
   height: 12px;
  }

select.required, input[type=text].required, textarea.required, .requiredTbx.empty {
 background-color: #FEF9F6;
 border: rgba(244, 139, 80, 0.8) solid 1px;
 border-style: outset;
}
.inputCheckBoxList.required, .inputRadioButtonList.required {
 background-color: #FEF9F6;
 border: rgba(244, 139, 80, 0.8) solid 1px;
 border-style: outset;
}
.inputCheckBoxList, .inputRadioButtonList {
 width:90%; 
}
.inputCheckBoxList td, .inputRadioButtonList td {
 padding:0 0 0 5px; 
}

/*DISABLED STYLE FOR EDIT/DISPLAY CONTROLS*/
.disabled_tbx {
 border: none !important;
 background-color: transparent !important;
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
 padding: 0 !important;
 margin: 0 !important;
}

.disabled_ddl {
 border: none !important;
 background-color: transparent !important;
 background-image: none !important;
 font-size: inherit;
 font-weight: inherit;
 -webkit-appearance: none;
 color: inherit;
 /*padding: 0 !important;*/
 margin-bottom: 0px;
 margin-top: 0px;
}

 .disabled_ddl:disabled {
  color: inherit;
 }

 .disabled_ddl[disabled='disabled']::-ms-value {
  color: #000;
 }

 option:disabled {
    color: #dadada;
}
.disabled_btn {
 background-color: #e9e9e9 !important;
 color: #666666 !important;
 border-color: #d6d6d6 !important;
 font-style: italic !important;
 cursor: default !important;
}
.disabled_listItem {
 color: #666666 !important;
 cursor: default !important;
 pointer-events:none;
}
.disabled_listItem:before {
  cursor: default !important;
  border-left-color: #e9e9e9 !important;
}
 .disabled_btn:before {
  cursor: default !important;
  border-left-color: #e9e9e9 !important;
 }

.disabled_area {
 opacity: 0.5;
 font-style: italic;
}

/*#endregion */

/*#region SideBars */

.divSideBarOpen {
 display:inline-block;
 /*z-index: 3;*/
}

.divSideBar, .divSideBar.innerSidebar {
 color: #eaeaea;
 overflow: hidden;
 width: 0px;
 height: 0px;
 z-index: 1030;
 -webkit-transition: all 0.5s cubic-bezier(0.10, 0, 0, 1.0);
 -moz-transition: all 0.5s cubic-bezier(0.10, 0, 0, 1.0);
 -o-transition: all 0.5s cubic-bezier(0.10, 0, 0, 1.0);
 transition: all 0.5s cubic-bezier(0.10, 0, 0, 1.0);
}

.divSideBar.page {
 position: fixed;
 top: 0;
 left: 0;
  background-color: rgba(27, 27, 27, 0.95);
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.5);
 box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.5);
}
.divSideBar.innerSidebar{
 position:absolute;
 width: 100%;
 left:0;
 bottom:0; background-color: rgba(27, 27, 27, 0.85);
  /*-webkit-box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.5);
 box-shadow: 0px -2px 2px 0px rgba(0,0,0,0.5);*/
}

 .divSideBar .content {
  top: 20px;
  left: 20px;
  position: absolute;
  direction: ltr;
 }

 .divSideBar .title {
  border-bottom: solid 1px #f48b50;
  text-align: center;
  margin: 30px 40px 10px 0px;
  padding-bottom: 5px;
  font-weight: 400;
  text-transform: uppercase;
 }

 .divSideBar .row {
  min-height: 20px;
  padding: 5px 0px 5px 15px;
  position: relative;
  cursor: pointer;
  margin-left :0px;
  margin-right:0px;
 }

  .divSideBar .row:not(.open):hover {
   color: #ffffff;
   background-color: rgba(255,255,255,0.2);
  }

 .divSideBar .rowHover {
  background-color: rgba(255,255,255,0.2);
  width: 100%;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
 }

 .divSideBar .row.filter {
  padding: 0px 0px 0px 15px;
 }

  .divSideBar .row.filter .rowHover {
   height: 20px;
  }

  .divSideBar .row.filter input[type=checkbox] {
   margin: 7px 0 0;
  }

 .divSideBar input[type="submit"], .divSideBar input[type="button"] {
  border: 2px #f7f7f7 !important;
  border-bottom-color: #d1d1d1 !important;
  border-right-color: #d1d1d1 !important;
  border-style: outset !important;
 }

 .divSideBar input[type=checkbox] {
  display: inline-block;
  float: left;
  clear: left;
  cursor: pointer;
  height: 10px;
 }

 .divSideBar input[type="checkbox"] ~ label {
  display: inline-block;
  font-weight: 400;
  float: left;
  cursor: pointer;
      color: #dadada;
    font-size: 0.94em;
 }

 .divSideBar a {
  vertical-align: middle;
  color: #ffffff;
  opacity: 0.6;
 }

  .divSideBar a:hover {
   opacity: 1;
   font-size: 1.1em;
  }

.divSideBarExpanded.page {
 /*width: 300px;*/
 height: 100vh;
 overflow-y: auto;
 margin-left: -17px;
 direction: rtl;
}

.divSideBarExpanded {
 width: 267px;
 margin-left: -17px;
}

.divSideBarExpanded.innerSidebar {
 width: 100%;
 height: 20%;
 margin: 0px;
 direction: rtl;
 border-top: 4px solid #d1d1d1;
}


.divSideBar_expander {
 width: 25px;
 height: 25px;
 cursor: pointer;
}
.divSideBar_expander.innerSidebar {
 width: 20px;
 height: 20px;
 cursor: pointer;
 bottom: 5px;
 right: 10px;
 position: absolute;
 z-index: 1031;
 -webkit-transition: all .5s cubic-bezier(.1,0,0,1);
 -moz-transition: all .5s cubic-bezier(.1,0,0,1);
 -o-transition: all .5s cubic-bezier(.1,0,0,1);
 transition: all .5s cubic-bezier(.1,0,0,1);
}
.divSideBarExpanded_expander {
 bottom: 75px!important;
}

.iconCheck, .iconReset {
 cursor: pointer;
 width: 40px;
 /*position: fixed;*/
 right: 3%;
 top: 120px;
}

/*#endregion */

/*#region Search */

.divCollapseTrigger {
 border-top: 1px solid #6f6f6f;
 margin: 5px 0;
 position:relative;
}



.imgCollapse {
 width: 15px;
 position: absolute;
 right: 0px;
 top: 1px;
 cursor:pointer;
}



/*#endregion */

/*#region FileUpload */
.fileUpload {
}
.fileUpload .dropArea {
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-size: 1.1em;
    color: #717179;
    text-transform: uppercase;
    position: relative;
    margin-top: 10px;
}
.fileUpload .dropSection {
    height: 80px;
    width: 100%;
    background-color: #f3f3f3;
    margin: 5px 0px;
    border: dotted 2px #f48b50;
    display: inline-block;
    left: 10px;

}

.fileUpload .dropSection.active {
    background-color: rgba(244, 139, 80, 0.3);
}
.small-icon.uplimgClose {
    width: 13px;
    padding: 2px 0px;
    position: absolute;
    right: 5px;
}
.uploadedFiles {
    font-size: 0.9em;
    display:block;
}
.spanFile{
  position: relative; display: block;height: 17px;
}

.uploadedFiles .iconDelete {
    vertical-align: middle;
    width: 18px;
    height: 15px;
    opacity: 0.8;    
    position: absolute;
    left: 0;
}
/*#endregion */

/*#region Alert Level */

.alertRed { background: red !important; color: #dadada; }

 .alertRed .lblField, td.alertRed { background: red !important; color: white !important; }

.alertYellow { background: #FCE40D !important; }

.alertGreen { background: green !important; color: white !important; }
 .alertGreen .lblField, td.alertGreen { color: white !important; }

.alertYellow { background: #FCE40D !important; }

.alertNone { background: transparent; }

/*#endregion */

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 .jumbotron {
  margin-top: 20px;
 }

 .body-content {
  padding: 0;
 }
}

/*#region Animations */

.flipV { -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; }

@-webkit-keyframes flip-horizontal-bottom {
 0% { -webkit-transform: rotateX(0); transform: rotateX(0); }
 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}

@keyframes flip-horizontal-bottom {
 0% { -webkit-transform: rotateX(0); transform: rotateX(0); }
 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); }
}

.rotate-center { -webkit-animation: rotate-center 0.6s ease-in-out both; animation: rotate-center 0.6s ease-in-out both; }


@-webkit-keyframes rotate-center {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }

 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate-center {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }

 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/*#endregion */
