@import url("framework.css");
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {

    padding-left: 0px;
    padding-right: 0px;
        padding-top: 40px;
        
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}


.maincontent {
    margin-left: 20px;
    margin-right:20px;
      padding-top: 40px;

}

  #documenttable{
    max-width: 2480px;
    width:100%;
  }
  #documenttable td{
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
  }

 #Signable_div_party
{
    width :5%;
    height:100%;
    float:left;
    padding:2px;
     border: 1px solid #aaaaaa;
}

  #Signable_div_Left
{
     position:relative;
    width :75%;
    height:100%;
    float:left;
    padding:5px;
     border: 1px solid #aaaaaa;
    background-color:#375364;
}

#Signable_div_Centre
{
    width :10%;
    height:100%;
    float:left;
    padding:10px;
     border: 1px solid #aaaaaa;
     margin:5px;
}

#Signable_div_Right
{
    width :5%;
    float:left;
    padding:5px;
    height:100%;
    border: 1px solid #aaaaaa;
}
#div_halft_left
{
    width :50%;
    float:left;
    padding:5px;
    height:100%;
    border: 0px solid #aaaaaa;
}
#div_halft_right
{
    width :50%;
    float:right;
    padding:5px;
    height:100%;
    border: 0px solid #aaaaaa;
}
#ButtonBarDivUnit {
  top:160px;
}
.ButtonBarDiv {
  
  width:100%;
    
  display:table;
  height:auto;
  background:transparance
}
.ButtonBarDiv #imagecontainer {
display:table-cell;
text-align:center;
vertical-align:middle;
  width:100%;
}
.ButtonBarDiv input[type=image] {
  display:table-cell;
  vertical-align:middle;
  height: 100%;
  width:100%;
  margin:0px auto;
}


 #popUpParty {
     position:absolute;
     padding:10px;
    
     margin-left:50%;
  
     background-color:#FFFFFF;
     width:550px;
     height:auto;
     z-index: 9002;
 
    -webkit-box-shadow: 0px 0px 0px 4px rgba(160, 160, 160, .1);
    box-shadow: 0px 0px 0px 4px rgba(160, 160, 160, .1);
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
   
    
 }
 .divider {    
  width:100%;
  height:1px;
  margin: 15px 0 20px 0px;
  background-color:#e6e6e6;
  clear:both;
  display:block;
  float: left; 
}
.shadow-divider {    
  width:100%;
  height: 10px;
  margin: 30px 0px;
  background-image: url(../images/shadow-divider.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  clear:both;
  display:block; 
}
.dividercolor {    
  width:100%;
  height:2px;
  margin: 15px 0 20px 0px;
  background-color:#00b5f9;
  clear:both;
  display:block;
  float: left; 
}	
 #blanket {
 background-color:#111;
 opacity: 0.65;
 filter:alpha(opacity=65);
 position:absolute;
 z-index: 9001;
 top:0px;
 left:0px;
 width:100%;
 }

.parties_party {
    color: #fff;
    background: #375364;
    border: 2px solid #253843;
    height: 52px;
    width: 52px;
    border-radius: 30px;
    margin: 0 auto 15px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .05s ease;
    transition: -webkit-transform .05s ease;
    transition: transform .05s ease;
    transition: transform .05s ease,-webkit-transform .05s ease;
    z-index: 0;
    position: relative;
}
.parties_party span, .parties_party svg {
    pointer-events: none;
    position: absolute;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    top: 50%;
    left: 50%;
    display:block;
}
.parties_party_active {
    color: #fff;
    background: #0098ce;
    border: 2px solid #00729b;
    height: 52px;
    width: 52px;
    border-radius: 30px;
    margin: 0 auto 15px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .05s ease;
    transition: -webkit-transform .05s ease;
    transition: transform .05s ease;
    transition: transform .05s ease,-webkit-transform .05s ease;
    z-index: 0;
    position: relative;
}
.parties_party_active span, .parties_party_active svg {
    pointer-events: none;
    position: absolute;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    top: 50%;
    left: 50%;
    display:block;
}
.parties_party:focus{
    background: #0098ce;
    border: 2px solid #00729b;
    color: #fff;
    -webkit-transition: all .25 ease;
    transition: all .25 ease;
}

.parties_party:hover {
    
     height: 55px;
     width: 55px;


}

.parties_party_active:focus{
    background: #0098ce;
    border: 2px solid #00729b;
    color: #fff;
    -webkit-transition: all .25 ease;
    transition: all .25 ease;
}

.parties_party_active:hover {
    
     height: 55px;
     width: 55px;


}
/*.parties_party_active {
    color: #fff;
    background: #0098ce;
    border: 2px solid #00729b;
    height: 52px;
    width: 52px;
    border-radius: 30px;
    margin: 0 auto 15px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .05s ease;
    transition: -webkit-transform .05s ease;
    transition: transform .05s ease;
    transition: transform .05s ease,-webkit-transform .05s ease;
    z-index: 0;
    position: relative;
}*/
/*.parties_party span, .parties_party svg {
    pointer-events: none;
    position: absolute;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    top: 50%;
    left: 50%;
}*/

.parties_edit_button {
    position: absolute;
    top: -1px;
    right: -6px;
    border: 1px solid #49509c;
    background: #fff;
    border-radius: 30px;
    height: 20px;
    width: 20px;
    display: none;
}

.parties_edit_button:hover {
    background: #6269b6;
}
/*element.style {
    transform-origin: left center;
    z-index: 2341;
    display: none;
}*/
.el-tooltip_popper.is-dark {
    background: #303133;
    color: #fff;
}
.el-tooltip_popper {
    position: absolute;
    border-radius: 4px;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word;
}


.document_setup_field_config {
  
    
    z-index: 1000;
    
    background: #fff;
      border-top: 1px solid #dde2e5;
      max-height:400px;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left:0px;
    margin-right:5px;
    margin-top:5px;
    padding-bottom:20px;

    
    
}
.field_configuration {
     position: absolute;
    padding: 0px;
    background: #fff;
    border: 1px solid #dde2e5;
    z-index: 1;
    text-transform: capitalize;
    width: 100%;
   
   
     
   
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 26px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

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

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

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

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

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


.document_setup {
    background: #fff;
    height: 100%;
    overflow: hidden;
}
.document_setup_header {
    padding: 15px;
    margin-bottom: 0;
    border-bottom: 1px solid #dde2e5;
    background: #fff;
}
.document_setup_header:after {
    content: "";
    display: block;
    clear: both;
}

.document_setup_page {
    padding: 0;
    position: relative;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    /*padding-top: 30px;*/
    margin-right: 30px;
    /*padding-right: 30px;*/
}

/*.document_setup_page_field,*/ 

.document_setup_page_field:hover {
    border-color: #f1c40f;
}
.active{
    cursor: move;
    -webkit-box-shadow: 2px 2px 15px -5px #000;
    box-shadow: 2px 2px 15px -5px #000;
}

.document_setup_document {
    -webkit-box-shadow: 3px 3px 5px -2px #222;
    box-shadow: 3px 3px 5px -2px #222;
    border-radius: 8px;
    margin: 10px;
    position: relative;
}

.document_setup_field_container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/*.document_setup_page_field{
    padding-left: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: -webkit-box-shadow .25s ease;
    transition: -webkit-box-shadow .25s ease;
    transition: box-shadow .25s ease;
    transition: box-shadow .25s ease,-webkit-box-shadow .25s ease;
}*/
.document_setup_page_field  {
    position: absolute;
    background: #fff;
    border: 2px solid;
    z-index: 1;
    border-radius: 3px;
}
.document_setup_page_field:hover {
     position: absolute;
    background: #fff;
    border: 2px solid;
    z-index: 1;
    border-radius: 3px;
}
.handle {
    width: 10px;
    height: 10px;
    background: #eee;
    border: 1px solid #333;
    border-radius: 2px;
    z-index: 2;
}
.handle, .vdr {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.vdr {
    /*-ms-touch-action: none;*/
    touch-action: none;
    /*border: 1px dashed #000;*/
}

.handle-tl {
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}
.handle-tm {
    top: -10px;
    left: 50%;
    margin-left: -5px;
    cursor: n-resize;
}
.handle-tr {
    top: -10px;
    right: -10px;
    cursor: ne-resize;
}
.handle-mr {
    top: 50%;
    margin-top: -5px;
    right: -10px;
    cursor: e-resize;
}
.handle-br {
    bottom: -10px;
    right: -10px;
    cursor: se-resize;
}
.handle-bm {
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    cursor: s-resize;
}
.handle-bl {
    bottom: -10px;
    left: -10px;
    cursor: sw-resize;
}
.handle-ml {
    top: 50%;
    margin-top: -5px;
    left: -10px;
    cursor: w-resize;
}

/*.resizable {
   
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
    resize: both;
    box-sizing: border-box;
}*/
/*body *, html * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/
/*user agent stylesheet
div {
    display: block;
}*/

.document_setup_pages_simple {
    width: 90%;
    margin: 0 auto 0;
    position: relative;
    -webkit-margin-collapse: separate;
    height: 100%;

}
.document_setup_pages {
    width: 80%;
    margin: 0 auto 0;
    position: relative;
    -webkit-margin-collapse: separate;
    height: 100%;
    text-align: center;
}

.document_setup_field_x{
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
}
/*body *, html * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}*/

.document_setup_page img {
    /*border-radius: 8px;
    pointer-events: none;*/
     width: 100%;
    display: block;
}
img {
    /*width: 100%;*/
  
    display: block;
}
/*body *, html * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/
/*.document_setup_pages{
    width: 100%;
    margin: 0 auto 0;
    position: relative;
    -webkit-margin-collapse: separate;
    height: 100%;
    text-align: center;
}*/


/*.document {
    width: 100%;
    padding-top: 42px;
}*/
.document {
    float: left;
    width: 95%;
    padding: 30px 30px 87px;
    position: absolute;
}

.progress {
    text-align: center;
}
.progress_bar {
    position: fixed;
    background-color: hsla(0,0%,100%,.5);
    padding: 20px;
    margin: -30px -30px 30px;
    top: 76px;
    width: 75%;
    z-index: 99;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.progress_bar_amount {
    position: absolute;
    padding: 20px 0;
    background-color: #49509c;
    -webkit-transition: width .25s ease-in-out;
    transition: width .25s ease-in-out;
    top: 0;
    left: 0;
}

.progress_bar_details {
    position: absolute;
    left: 50%;
    top: 61px;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    padding: 5px 10px;
    background: #000;
    text-transform: uppercase;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.document_header {
    width: 100%;
    margin: 0 auto;
    background-color: #73889a;
    padding: 15px;
    margin-bottom: -15px;
    color: #fff;
}

.document_page {
    position: relative;
    width: 100%;
    margin: 15px auto;
    -webkit-box-shadow: 0 5px 20px -5px #73889a;
    box-shadow: 0 5px 20px -5px #73889a;
}
.document_page_simple {
    position: relative;
    width: 100%;
    margin: 15px auto;
    -webkit-box-shadow: 0 5px 20px -5px #73889a;
    box-shadow: 0 5px 20px -5px #73889a;
    padding:15px;

}

.document_setup_header_updated {
    display: inline-block;
    font-size: 11px;
    text-align: right;
}
button_rounded{
    border-radius: 30px;
}
.document_setup_header_back_button{
    margin-right: 15px;
}
/*.footer {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    -webkit-box-shadow: 0 -15px 15px -20px #73889a;
    box-shadow: 0 -15px 15px -20px #73889a;
}*/

.field_popup{
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    width:100%;
    z-index: 10;
    -webkit-transition: bottom .25s ease-out;
    transition: bottom .25s ease-out;
    -webkit-box-shadow: 0 -20px 30px -30px #73889a;
    box-shadow: 0 -20px 30px -30px #73889a;
    cursor: default;
    z-index: 999;
    opacity: 0;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    color: #555;
    opacity: 1;
    display:none;
}
.field_popup_no_buttons {
    margin-bottom: 50px;
    padding-left:20px;
    padding-right:20px;
}
.field_popup_action_message{
    position: absolute;
    top: -32px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    left: 50%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.field_popup_content {
    padding: 0px;

}
.field_popup_content_container {

    margin-bottom:0px;
}
.field_textarea {
    height: 250px;
}
.document_field_textarea {
    overflow: inherit;
    white-space: pre-line;
}
.field_popup_header{
    padding: 15px;
    border-bottom: 1px solid #dde2e5;
    margin: 0;
    position: relative;
}
.field_popup_header_text {
    float: left;
}
.field_popup_buttons {
    padding: 0 15px 15px;
    margin-bottom:20px;
}
.field_popup_field_text, .field_popup_field_textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #a3b1b9;
    font-size: 32px;
}
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark-color(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-appearance: textfield;
    background-color: -internal-light-dark-color(white, black);
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    /*padding: 1px 0px;*/
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

.button {
    padding: 12px 15px;
    background-color: #fff;
    color: #004d68;
    float: left;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #004d68;
    border-radius: 3px;
}
.button--cta {
    background-color: #0098ce;
    border-color: #0098ce;
    color: #fff;
}

.field_popup_date_text{
    position: absolute;
    right: 0;
    top: 50%;
    -ms-top: 0;
    -webkit-transform: translate3d(-75%,-50%,0);
    transform: translate3d(-75%,-50%,0);
    -ms-transform: translate3d(-100%,-100%,0);
    margin: 0;
    padding: 15px;
    background-color: #0098ce;
    color: #fff;
    border-radius: 3px;
}

.document_field span, .document-field img {
    pointer-events: none;
    position: absolute;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    top: 50%;
    
}
/*.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-container img {
  
     width: 100%;
     height:auto;
    display: block;
    
   
}*/

.document_setup_page_field span{
    pointer-events: none;
}

.document_setup_page_field_label{
    position: absolute;
    top: -15px;
    left: -2px;
    font-size: 11px;
    color: #fff;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: 700;
}

.document_setup_page_field_required_marker{
    border-radius: 50%;
    height: 8px;
    width: 8px;
    background: #e74c3c;
    float: right;
    margin: -4px -4px 0 0;
}

.document_field_text {
    border-color: #ccc;
    /*white-space: pre;*/
    
}
.document_field {
    position: absolute;
    padding: 5px;
    border: 2px solid;
    background-color: #fff;
    cursor: pointer;
    border-radius: 3px;
    
}


.document_field_label {
    position: absolute;
    background: #e74c3c;
    top: -3px;
    right: -3px;
    color: #fff;
    line-height: 0;
    padding: 1px;
    border-radius: 10px;
    right: -7px;
    top: -7px;
    pointer-events: none;
}

.document_field_signature {
    border-color: #9ccc31;
}

.document_field_date{
    border-color: #39b7cd;
}


.checkbox {
    display: block;
    background-color: #0098ce;
    color: #fff;
    border: 1px solid #004d68;
    cursor: pointer;
    height: 100%;
    width: 100%;
    border-radius: 2px;
    -webkit-box-shadow: inset #000 0 0 5px -2px;
    box-shadow: inset 0 0 5px -2px #000;
}
.document_field_checkbox{
    padding: 0;
    min-height: 15px!important;
    min-width: 15px!important;
    border: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.document_field_is_disabled {
    border: 0;
    background-color: transparent;
    padding: 0;
    cursor: default;
    pointer-events: none;
}

.fit-text {
    display: inline-block;
    left:0;
}

.fa_icon {
    display: inline-block;
    fill: currentColor;
}

.footer {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height:50px;
    -webkit-box-shadow: 0 -15px 15px -20px #73889a;
    box-shadow: 0 -15px 15px -20px #73889a;
}

.field_popup_close{
    position: absolute;
    right: 15px;
    top: 12px;
    padding: 7px;
    background: #e74c3c;
    border: 2px solid #e43725;
    color: #fff;
    border-radius: 30px;
    line-height: 0;
    cursor: pointer;
}
/* Buttons */ 
a.button {
  display:inline-block;
  font-family:'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
  /*text-transform: uppercase;*/
  letter-spacing:-1px;
  color:#fff;
  cursor:pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-decoration:none;
  margin:0 0 10px;
  font-weight: 600 !important;
  border: 1px solid #555555; 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; 
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; 
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.70);
}

a:hover.button {
  text-decoration:none;
}

.button.small {
  font-size:12px;
  font-weight:bold;
  padding:4px 22px;
}

.button.medium {
  font-size:14px;
  font-weight:bold;
  padding:6px 22px 8px 22px;
}

.button.large {
  font-size:16px;
  font-weight:bold;
  padding:9px 22px;
}

.button.gray {
  background-color:#353535;
  background: -moz-linear-gradient(top, #4e4e4e, #353535) !important;
  background: -webkit-linear-gradient(top, #4e4e4e, #353535) !important;
  background: -o-linear-gradient(top, #4e4e4e, #353535) !important;
}

.button.white {
  color:#666;
  background-color:#e1e1e1;
  background: -moz-linear-gradient(top, #efefef, #e1e1e1) !important;
  background: -webkit-linear-gradient(top, #efefef, #e1e1e1) !important;
  background: -o-linear-gradient(top, #efefef, #e1e1e1) !important; 
  border: 1px solid #D1D1D1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.70);
}

.button.red {
  background-color:#e62727;
  background: -moz-linear-gradient(top, #ef4646, #e62727) !important;
  background: -webkit-linear-gradient(top, #ef4646, #e62727) !important;
  background: -o-linear-gradient(top, #ef4646, #e62727) !important;
  border: 1px solid #DE0000;
}

.button.orange {
  background-color:#ff5c00;
  background: -moz-linear-gradient(top, #ff7b31, #ff5c00) !important;
  background: -webkit-linear-gradient(top, #ff7b31, #ff5c00) !important;
  background: -o-linear-gradient(top, #ff7b31, #ff5c00) !important;
  border: 1px solid #c2612b; 
}

.button.blue {
  background-color:#0F7896;
  background: -moz-linear-gradient(top, #1294B8, #1185A6) !important;
  background: -webkit-linear-gradient(top, #1294B8, #1185A6) !important;
  background: -o-linear-gradient(top, #1294B8, #1185A6) !important;
  border: 1px solid #0E738F; 
   cursor:pointer;
   color:White;
}

.button.green {
  background-color:#a2c437;
  background: -moz-linear-gradient(top, #b0d342, #a2c437) !important;
  background: -webkit-linear-gradient(top, #b0d342, #a2c437) !important;
  background: -o-linear-gradient(top, #b0d342, #a2c437) !important; 
  border: 1px solid #88A628;
}
 .closeButtonImg
 {
      height:15px;
    width:15px;
}



 .draggable1 {
    cursor: move;
}
.resizable1 {
    border: 1px dashed #000000;
    position: relative;
    min-height: 50px;
}
.ui-resizable-handle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}


.RestaurantButton {
    /*background: url("../images/decorative_prevbtn.png") no-repeat scroll 10px 6px #0F7E9C;*/
    border: 2px solid #fff;
    border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	-webkit-border-radius: 20px 20px 20px 20px;
    box-shadow: 1px 1px 2px 1px #D5D5D5;
    width:150px;
    
    float: left;
    font-size: 10px;
    padding: 2px 20px 2px 37px;
    margin-left:5px;
    color:#FFFFFF;
    font-weight:bold;
    background-color: #0F7E9C;
    padding-left:5px;
    padding-right:5px;
     padding-top :15px;
      padding-bottom:15px;
      text-align:center;
}



/* ROUNDED TWO */
.roundedTwo {
	width: 28px;
	height: 28px;
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 0px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	/*-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	/*-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	/*box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	position: relative;
}

.roundedTwo label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedTwo label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 5px;
	left: 4px;
	border: 3px solid #fcfff4;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.roundedTwo label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedTwo input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


/**
 * Checkbox Four
 */
.checkboxFour {
	width:  0px;
	height: 40px;
	background: #ddd;
	margin: 20px 90px;

	border-radius: 100%;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checkbox button
 */
.checkboxFour label {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100px;

	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;

	background: #333;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
	background: #26ca28;
}


/* ROUNDED TWO */
.roundedfive {
	/*width: 28px;
	height: 28px;
*/
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 0px auto;
/*
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
*/
	/*-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	/*-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	/*box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);*/
	position: relative;
}

.roundedfive label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedfive label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 5px;
	left: 4px;
	border: 3px solid #fcfff4;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.roundedfive label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedfive input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


.content-background {
    position: relative;
    background: #f5f5f5;
    padding: 8px 0;
    border-radius: 7px;
}
.content-container {
    position: relative;
    background: #FFF;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
}
.content-container-margin {
    margin: 0 10px;
}
#barebones-content {
    float: left;
    margin-left: 40px;
    padding-left: 40px;
    border-left: 1px dotted #CCC;
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.success {
    background: #CEF2FF;
    border: 1px solid #0098CE;
}


@media screen and (min-width:961px) {
   

     #PopUpNotes {
   
     /*margin-left:35%;*/
     left:0px; 
    
 }
}

@media screen and (max-width:960px) {
    .menuCategories {
        display: none;
    }

    .restaurantParts {
        width: 60%;
    }

    #basket {
        width: auto;
    }

     #PopUpNotes {
   
     /*margin-left:15%;*/
     left:0px; 
    
 }
}

@media screen and (max-width:640px) {
    .restaurantParts {
        width: 100%;
    }

    #basket {
        display: none;
    }

     #PopUpNotes {
    
     margin-left:0%;
    left:0px;
    
    
   
    
 }
}



 .ContentPopup {
    
     overflow-y: scroll;
     height:auto;
     max-height:200px;
      background-color:#FFFFFF;
 }


  #PopUpNotes {
     position:fixed;
     
     /*bottom:400px;*/
     padding:10px;
     /*margin-right:50px;*/
  
   margin-left:-30px;
   margin-top:-200px;
    width:90%;
    /*max-width:500px;*/
     background-color:#FFFFFF;
     /*width:100%;
     min-width:300px;     
     max-width:400px;*/
     bottom:0;
     height:auto;
     max-height:400px;
     z-index: 9002;
     /*overflow-y: scroll;*/
 
    -webkit-box-shadow: 0px 0px 0px 4px rgba(160, 160, 160, .1);
    box-shadow: 0px 0px 0px 4px rgba(160, 160, 160, .1);
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
   

    /*background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
     max-height:500px;
    width:100%;
    z-index: 9002;
    -webkit-transition: bottom .25s ease-out;
    transition: bottom .25s ease-out;
    -webkit-box-shadow: 0 -20px 30px -30px #73889a;
    box-shadow: 0 -20px 30px -30px #73889a;
    cursor: default;
    z-index: 999;
    opacity: 0;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    color: #555;
    opacity: 1;
    display:none;*/
    
 }

 #blanket {
 background-color:#111;
 opacity: 0.65;
 filter:alpha(opacity=65);
 position:absolute;
 z-index: 9001;
 top:0px;
 left:0px;
 width:100%;
 }


  
.roundedTwo label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
      z-index: 9002;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedTwo label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 5px;
	left: 4px;
	border: 3px solid #fcfff4;
	border-top: none;
	border-right: none;
      z-index: 9002;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

}

.roundedTwo label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedTwo input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
    color:blue;
	opacity: 1;
}



.radiobutton {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radiobutton input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiobutton:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiobutton input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiobutton input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiobutton .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

@media screen and (max-height:700px) {

    .basketBag {
        max-height: 500px;
        overflow-y:scroll;
    }
}