@charset "utf-8";
/* CSS Document */

@import 'opensans.css';

body {font-family: 'Open Sans Hebrew'; font-size: 15px; overflow-x: hidden; padding-top: 70px; }

p {margin: 0;}

.img-fluid {display: inline-block;}
    
 iframe {max-width: 100% !important;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

a, .btn {transition: all 0.3s;}

h1, h2 {margin-top: 0;}

.text-left {text-align: left !important;}
.text-right {text-align: right !important;}

 .btn-primary-old {color: #fff;  background-color: #337ab7;  border-color: #2e6da4;}
        .btn-primary-old:hover {opacity: 0.8; color: #fff;}

.modal-header {display: block;} /*  display: flex aligns the content to the left */


/***************************************************
| Header
***************************************************/


.regular_header {text-align: center; padding: 15px 0;background: #0063ae; position: fixed; width: 100%;top: 0; z-index: 999; min-height: 70px; }



/***************************************************
| show signature 
****************************************************/

.signature_modal .image_upload .open {margin: 10px 0;}

.signature_modal .buttons_container {margin: 10px 0 0 0; text-align: center;}


/***********************************************************************
| Login page
************************************************************************/
    .login_page {font-family: 'Open Sans Hebrew'; font-size: 15px; overflow-x: hidden;
                       color: #333333; background: #F7F7F7;
                      }
        
	.login_page  .login_screen {
	   margin: 50px auto 0;
	   padding: 1.5em 2.5em;
	   width: 42%; height: 32%;
	   background: url(/images/admin/backg_image_transparent.png);
	   border-radius: 5px;
	}
	
	.login_screen .input-group-text {
       background: #2780B8;    color: white;  padding: 1.1rem .75rem;
    }
	
	.welcome {font-size: 2.6em; text-align: right; margin: 0 auto 15px;}
	  .welcome span {background: white; padding: 0.2em 0.5em; border-radius: 50%;}
	  
		
	.login_txt {font-size: 1.1em; margin-top: 5px;}
	  .login_txt  p {line-height: 19px;}
	
			.form_fields {margin-top: 1.3em;}
			 .btn-login { 
			  color: #ffffff; 
			  background-color: #6CA80B; 
			  border-color: #67A109; 
			} 
 			
				
	.login_screen .form_fields div {margin-bottom: 1em; }
	
	 .login_screen .form_fields .form-control {height: 3.2em;}
	
		
	  .login_screen .form_fields input[type=text],
	  .login_screen .form_fields input[type=password] {font-size: 1.1em;}
		
	.login_screen .input-group-addon {background: #2780B8; color: white;}
	
	




/***************************************************
|PDF FORMS
***************************************************/

 .form_container {margin: 20px auto; width: 
                           100%; overflow: auto; /**  for smartphones - in a not reponsive view **/
                          }

.do_form_save {min-height: 70px; text-align: center; padding: 15px 0; background: #0063ae; position: fixed; width: 100%;top: 0; z-index: 99; }

.frm_save input[type=text] {font-family: arial;}

.btn_add_signature, .btn_add_image  { border: 1px solid #0072c6; height: 100%; width: 100%; background: #E0F2FE;}
  .btn_add_signature {text-align: center;}
 
.btn_remove_signature {display:none; margin-left: 0px; margin-top: -10px; padding: 0px 2px; z-index: 999; color: red;
                                  border: 1px solid red; font-size: 11px; osition: relative;}
 
.hidden_file_input {display: none !important;}
 
 .signature-thumb-image {width: auto; height: 100%; vertical-align: top;}

#signature_modal  canvas{
	cursor: url('/images/pen.png'), default;
}


.element_container {position: absolute;}
   .element_container .item {position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
   .element_container  input[type=text], .element_container  input[type=email], .element_container  textarea,
   .element_container  select, .element_container  input[type=number]  
   
   /***   padding: 0 !important; line-height: 10px !important; min-height: 18px/19px;   for IPHONE ***/
   {border: 1px solid #0072c6; /*background: #E0F2FE;*/  padding: 0; line-height: 10px; min-height: 16px; }
   .element_container textarea {resize: none; /*background: #E0F2FE;*/ line-height: 14px;}
   
  .element_container  input[type=email] {direction:ltr; text-align: left;}  
      
.image-upload {position: absolute;}
.image-upload .btn_add_signature {border: 1px solid #0072c6;} 

.required {border: 1px solid red !important;}

.numeric_fld {direction:ltr; text-align: left; padding-right: 0; padding-left: 3px;}

.add_border {border: 1px solid #0072c6;}
 
 .error, .error + .select2  {border: 2px solid red !important; }
    

 input[type=checkbox].error+label, input[type=radio].error+label  {outline: 2px solid red;}  
   

.ui-datepicker {z-index: 9 !important;}
.date_field {text-align: center }

#tofes_area select {font-size: 13px; }  


  /*Hide the radio button:*/
   #tofes_area input[type=radio], #tofes_area input[type=checkbox]{
     /*position: absolute; left: -99999px*/ display:none;
    }
 /*Then, style the label so it looks like however you want:*/

  #tofes_area  label{
    width: 16px; height: 16px; /*border-radius:0;*/
    border: 1px #0072c6 solid;
    line-height:16px; /* display:block;*/
    text-align:center;    color:black;
    font-size:16px;    cursor:pointer;
    background: #E0F2FE; position:relative; z-index: 9;
    } 
  #tofes_area   input:checked + label:before{
       opacity:1;
    }
    
  .element_container   input[type=radio]:checked + label:before{
        border-radius: 50%;
  }
    
  #tofes_area  label:before{
        position:absolute;
        top:3px;
        left:3px;
        height: 8px;
        width: 8px; /*border-radius:12px;*/
        background:#3a3a3a ;
        content:''; opacity:0;        
    }
    
    .is_radio_label {border-radius: 50%;}
    .element_container  label.is_radio_label:before{
       left:2px;
    }
    
    .sr-only { /*   נחוץ בגלל ההגדרות שכאן מעל  */
       position: absolute !important;  width: 1px !important; height: 1px !important; border: 0 !important;
    }
    
    
     .english_only   {direction:ltr; text-align: left;}
     
     .link_in_form a {color: #000;}
    
    /****************************************/

   .attachment {cursor: pointer; background: url(/images/attachment-icon.png); position: relative; width: 85px !important; height:19px !important; }
    .btn_remove_attachment {display:none; position: absolute; top: 10px; right: -15px; padding: 0px 2px;
                                             font-size: 11px; border: 1px solid red; color: red;}
      .btn_remove_attachment .fa {font-size: 11px; color: red;}
      
   .attachment_help {position: absolute; top: -18px; right: 0; font-size: 12px; width: 200px; color: blue;  }

   /***  attachment modal ***/
   .frm_attachment {margin: 20px 0;}
   .attachment_title {font-weight: bold;}
   
   .frm_attachment  .submit_btn {margin: 20px 0 0 0;}
   
	.attachment_modal #output{
		padding: 5px; font-size: 14px; font-weight: bold; text-align: center;
	}
	
	/* prograss bar */
	.attachment_modal #progressbox {
		border: 1px solid #CAF2FF; padding: 1px; 	position:relative; width:400px;
		border-radius: 3px; margin: 10px auto; display:none;text-align: center;
	}
	.attachment_modal #progressbar {
		height:23px; border-radius: 3px; background-color: #CAF2FF; width:1%; 
	}
	.attachment_modal #statustxt {
		top:3px; left:45%; position:absolute; display:inline-block; 	color: #FFFFFF;
	}


    /* view attachment uploaded before */
    .show_uploaded_file {position: absolute; top: -10px; right: -85px;  font-size: 25px;}

    /*checkboxes or radio button */
    .hide_labels {border:none!important; background: none !important; cursor: default !important;}




   /*** click to download modal  ****/

  .frm_email  label {border:none;}
  
  /** when we have stages **/
  .no_border {border: none !important; background: none !important; outline: none;}
  /**  hide arrow **/
   select.no_border {-webkit-appearance: none;    -moz-appearance: none;    text-indent: 1px; line-height: 20px; outline: none}
   
   .no_border.error {/*background-color: indianred !important;*/ border: 2px dashed red !important;}


   .powered_by_iforms {position: absolute;top: 0; right: 20px; }

   .btn_white {background: #fff; color: #0063ae;}
      .btn_white:hover {opacity: 0.8;}


  /*** confirmation page ***/
  
  .confirmation_page_header {margin: 25px 0;}

 .confirm_btn {padding: 6px 26px;font-size: 1.2em; margin-left: 15px; }
    .confirm_btn:last-child {margin-left: 0;}


   /***  SELECT2 ***/
  
   .select2-container { 
	    margin: -11px 0 0 0;   
   }
   
   .select2-container .select2-selection--single {  
      height: 19px;  
   }
   .select2-container--default .select2-selection--single .select2-selection__rendered {    
      line-height: 19px;
   }
   .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 26px; 
      top: -3px;   
   }
   
   

   /**  Readonly select2 !!!  **/
   select[readonly].select2-hidden-accessible + .select2-container {
       pointer-events: none;
       touch-action: none;
   }
   select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
       background: transparent;
       box-shadow: none;
       border:none;
   }
   select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
       display: none;
   }






/* CSS for responsive iframe */
/* ========================= */

/* outer wrapper: set max-width & max-height; max-height greater than padding-bottom % will be ineffective and height will = padding-bottom % of max-width */
#Iframe-Master-CC-and-Rs {
  max-width: 512px;
  max-height: 100%; 
  overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  
  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */
  
}
 
.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
  padding-bottom: 107%;
}

/* general styles */
/* ============== */
.set-border {
  border: 5px inset #4f4f4f;
}
.set-box-shadow { 
  -webkit-box-shadow: 4px 4px 14px #4f4f4f;
  -moz-box-shadow: 4px 4px 14px #4f4f4f;
  box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
  padding: 0px;
}
.set-margin {
  margin: 30px;
}
.center-block-horiz {
  margin-left: auto !important;
  margin-right: auto !important;
}
/************************************************/




/***************************************************
|footer
***************************************************/

footer {text-align:  center; margin: 30px 0 0  0; background: #EEEEEE; padding: 15px 0;}

  footer a {color: #000;}





/*** Media Queries ***/

@media screen and (max-width: 1024px) {
	
	  .btn-show {margin-bottom: 20px;}
	
}



@media screen and (max-width: 991px) {
	

  .screen { padding-right: 10px; padding-left: 10px;}
	
  .btn-show {margin-bottom: 20px;}
	
  .top_image .content ul.features li {line-height: 1.2em; }
  
  .form_container {padding-top: 50px;}
   	
}


@media screen and (max-width: 700px) {
		
		#tofes_area  label{width: 20px; height: 20px; }
		
		#tofes_area  label:before{top:4px;  left:4px; height: 10px; width: 10px;  }
		
		.client_logo {margin-bottom: 20px;}
		
		.powered_by_iforms {width: 80px; top: 16px; right: 10px;} 
		
		.login_page .login_screen {
		    margin: 0px auto 0;
		    padding: .5em .5em;
		    width: 95%;
		    height: 100%;
		    background: url(/images/admin/backg_image_transparent.png);
		    border-radius: 5px;
		}
		
		.link_in_form {display:none;}		
    				

}


@media screen and (max-width: 320px) {
	
	
}




/*** 5 columns
***************************************************/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: right;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: right;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: right;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: right;
    }
}


@media all and (-ms-high-contrast:none)   {
     .element_container .item { line-height: 10px;} /* IE10 */
     *::-ms-backdrop, .element_container  .item {line-height: 10px;} /* IE11 */
}