@charset "UTF-8";
/* CSS Document */
body {
  padding-top: 10px;
  padding-bottom: 40px;
  /* background-image: url("../images/background.jpg")!important; */
  background-color:#ffffff!important;
  background-position: top;
  font-size: 12px!important;
  color: #797979;
}

/*.sidebar {
    width: 150px!important;
}*/

.h2, h2 {
    font-size: 20px!important;
}

.h3, h3 {
    font-size: 18px!important;
}

.h4, h4 {
    font-size: 16px!important;
}

.h6, h6 {
    font-size: 14px!important;
}

.btn{
  font-size: 12px!important;
}

.col-lg-2{
    padding-right: 5px;
    padding-left: 5px;
}

.col-sm-1 {
    width: 7%;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    word-wrap: normal!important;
}

.form-control {
    padding: 2px 16px!important;
    font-size: 12px!important;
    word-wrap: normal!important;
}

.black-background {background-color:#000000;}
.white {color:#ffffff;}

.requiredField{
  color: #dd3333;
}

#patPhone1 {
  border: 0;
  padding-left: 30px;
  letter-spacing: 43px;
  background-image: linear-gradient(to left, #CCC 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 10px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  max-width: 500px;
  outline: none;
}

#patPhone2 {
  border: 0;
  padding-left: 30px;
  letter-spacing: 43px;
  background-image: linear-gradient(to left, #CCC 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 10px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  max-width: 500px;
  outline: none;
}

#page-wrapper {
  background-color: #ebebeb!important;
	border-left: none!important;
  margin: 0 0 0 200px!important;
	/*width: 100%!important;*/
}

#mobileSwapSSO{
  visibility: visible;
}

#mobileSwapSSOMobile{
  visibility: hidden;
}

.sidebar {
    /* z-index: 1;
    position: absolute; */
    width: 200px!important;
    /* margin-top: 51px; */
}

.navbar-default {
    background-color: transparent!important;
    border-color: transparent!important;
}

.sidebar ul li {
    border-bottom: 1px solid #4A4A4A;
}

.sidebar ul li a.active {
    background-color: #BF2326!important;
	border-color: transparent!important;
	color: #ffffff!important;
}

a{
    color: #797979!important;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #797979;
}

.page-header h3{
	color: #797979!important;
}
.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #5D5D5D!important;
}
.slidedown{
  			max-height: 255px;
            overflow-y: hidden;
			overflow-x: hidden;
            -webkit-transition: max-height 0.2s linear;
            -moz-transition: max-height 0.2s linear;
            -o-transition: max-height 0.2s linear;
            transition: max-height 0.2s linear;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 45px;
  text-align:center;
  margin:auto;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 5px;
  left: 5px;
  right: 0;
  bottom: 0;
  background-color: #99cc00;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 6px;
  bottom: 5px;
  background-color: white;
  -webkit-transition: .8s;
  transition: .8s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(350px);
  -ms-transform: translateX(350px);
  transform: translateX(350px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.complete_active{
	background: #99cc00;
	border: none;
	width: 450px;
	height: 65px;
	font-size: 25px;
	content: "TAB TO COMPLETE";
}

.complete_inactive{
	background: #999999;
	border: none;
	width: 450px;
	height: 65px;
	font-size: 25px;
	content: "COMPLETED";
}
/* signature capture */
.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img{
  position: absolute;
  width: 168px;
  height: auto;
}

/* DEVICE SETTING ONLY  */
@media only screen and (min-device-width : 280px) and (max-device-width : 768px) {
  body {
    	padding-top: 0!important;
	}
  #userProfile{
    visibility: hidden!important;
  }
  .userProfile{
    visibility: hidden!important;
  }
  #mobileSwapSSO{
    visibility:hidden!important;
  }
  #mobileSwapSSOMobile{
    visibility: visible!important;
  }
  .sidebar {
    /* visibility: hidden!important; */
    width: 100%!important;
  }
	.navbar-default {
		background-color: #fff!important;
		border-color: transparent!important;
	}
  .navbar-brand {
    padding: 7px 18px!important;
  }
  .col-sm-1 {
      width: 90%!important;
  }
  #page-wrapper {
		margin: 0!important;
		padding: 0!important;
	}
  h2{
    font-size: 15px!important;
  }
  img{
    width: 100px!important;
  }
  .modal-header{
    height: 60px!important;
  }
  .modal-body{
    max-height: calc(100vh - 210px)!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    width: 100%!important;
  }
  .modal-dialog {
    height: 400px!important;
    background-color: inherit;
  }
  .modal-footer {
    bottom: 0!important;
    width: 100%!important;
    display:inline-block!important;
    height: auto!important;
    background-color: #ccc!important;
    padding: 15px!important;
    text-align: center!important;
  }
  .modal-footer .btn{
    width: 80%!important;
    padding: 7px!important;
    margin: 4px!important;
  }
  .modal.open {
      display: block;
  }
  #msgCloseBtn{
    visibility: hidden!important;
  }
} /* End of mobile device settings */

.navbar-brand {
  padding: 0px 25px!important;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
}

/* NEW DELIVERY WORKFLOW */
.navbar-header {
  float: none;
}

.btn-lg2{
	width: 87%!important;
}

.modal {
position: fixed!important;
top: 5px;
left: 5px;
right: 5px;
width: auto;
margin: 0;
}

.modal-body{
	line-height: 2.5em!important;
}

.modal-header{
	background-color: #f0ad4e!important;
}

.modal-title{
	color: #ffffff!important;
}

/* NEW NAVVARS */
ul.nav li.active a {
    color: #dd3333!important;
}

input {
        max-width: 100%;
}
/* DESKTOP SETTING ONLY  */

/* @media (max-width: 768px){
	#page-wrapper {
		margin: 0!important;
		padding: 0!important;
	}
  img{
    width: 100px!important;
  }
  #userProfile{
    visibility: hidden!important;
  }
  .userProfile{
    visibility: hidden!important;
  }
} */

@media (min-width: 768px) and (max-width: 1023px){
  #userProfile{
    visibility: hidden!important;
  }
  .userProfile{
    visibility: hidden!important;
  }
  #mobileSwapSSO{
    visibility:hidden!important;
  }
  #mobileSwapSSOMobile{
    visibility: visible!important;
  }
  .sidebar {
    visibility: hidden!important;
    /* width: 100%!important; */
  }
	/* .navbar-default {
		background-color: #fff!important;
		border-color: transparent!important;
	} */
	body {
    	padding-top: 0!important;
	}
  .navbar-brand {
    padding: 7px 18px!important;
  }
  .col-sm-1 {
      width: 90%!important;
  }
  #page-wrapper {
		margin: 0!important;
		padding: 0!important;
	}
  img{
    width: 100px!important;
  }
}