html, body {
    margin:0;
    padding:0;
    height: 100%;
}
  
body {
    background-color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

h1 {
    font-size:15px;
}
  

.ui-tabs .ui-tabs-panel {
    padding:1px !important;
}
input, textarea {
    border: solid 1px silver;
}
input, textarea, select, button {
    /* padding: 3px; */
    font-size: 1.1em;
    font-family: 'Roboto', sans-serif !important;
}

.fa-select-icon {
    font-family: 'FontAwesome','Roboto', sans-serif !important;
}

  
input[type="button"], input[type="submit"], button {
    /*border-radius: 3px;*/
    font-size: 14px !important;
    /*color: black; */
    font-weight:bold !important;
    /*padding:3px;*/
}

.close{
    font-size: 21px !important;
}

input[type="button"]:hover, input[type="submit"]:hover, button:hover {
    cursor: pointer;
}

input[type="button"]:disabled, input[type="submit"]:disabled, button:hover {
    cursor: default;
    color: graytext;    
}

input[type="file"]{    
    border:0px;
    -webkit-box-shadow:none;
}

.comiseo-daterangepicker-triggerbutton.ui-button {
    font-size: 1em !important;
    font-weight:normal !important;

}

td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

.divCustomDataForm div {
    padding-bottom: 5px;
}


.gridLayout {
    display: flex;
    height: 100%; /* 1, 3 */
    flex-direction: column;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

    .gridLayout header {
        flex: 0; /* 2 */
    }


/* grid Layout*/



.gridLayout-footer {
    flex: 0; /* 2 */
    height: 20px;
    background-color: black;
    color: white;
    padding-top: 5px;
    font-size: 12px;
    text-align: center;
    /*bottom:0px;*/
    width: 100%;
    /*position:fixed;*/
}

.gridLayout-body {
    display: flex;
    flex: 1; /* 0 auto;*/ /* 2 */
    flex-direction: row;
    /*padding: var(--space);*/
    position: relative;
    overflow: auto;
  
}


    
    .gridLayout-content {
        flex: 1;
        /*margin-top: var(--space);*/
        /*  position:relative; */
        display: flex;
        flex-flow: column;
    }

.gridLayout-left {
    flex: 0;
    position: absolute;
    background-color: #525252;
    color: white;
    display: none;
    z-index: 99999;
    bottom: 0px;
    top: 0px;
}

#formPreview{
  border-left: 2px solid #b6ccd7;
    
  padding-left:10px;
  min-height:450px;
   position:static;
     
}
#formPreviewFields{
     border-right: 2px solid #b6ccd7;
   padding-right:15px;
   min-height:450px;
   position:static;
  
}
#builder_section_title{
     height:35px;
 position:absolute;
    width:100%;
     background-color:#b6ccd7;
     color:#1b3663;
     
}
  
#form_mobile_preview{
    margin-left:1px;
    
}
#form_mobile_iframe{
height:455px;
width:258px;
  
} 
.tools_options_icon,.tools_options_hover{
    height:10px;margin-right:20px;
}
  
.tools_btn_div{
 background-color:#f1f2f5;
   
}
.tools_btn_div:hover{
    background-color:white;
}
  
.formFieldsDiv  {
    
    border-radius: 2px;
    border: 1px solid #d4d4d4;
    padding: 20px; 
    width:370px;
    min-height:25px;
    margin-bottom: 15px; 
    background-color:#f1f2f5;
    position: relative;
                 }
.field_input_div{
    border:thin solid #444444;
    width:240px;
    margin-top:10px;
}
  
.field_title{
    color:#4f97d1;
    float:left;
    margin-top:-15px;
}
.delField{
    position: absolute;
    float:right;
    width:25px;
    height:52%;
     top: 0px;
    right: 0px;
  
    background-color:#d4d4d4;
}
.editField {
    
    position: absolute;
    float:right;
    width:25px;
    height:50%;
   bottom: 0px;
    right: 0px;
  background-color:#d4d4d4;
    }
#form_info_edit {
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #666666;
}
  
  
#form_Title_Div,#form_Decs_Div
{
     width:45%;
        }
  
#lstObjectTypes_Div{ 
    width:57%;
     white-space:nowrap;
}
  
[title]:before {
    /* needed - do not touch
    content: attr(title);
    position: absolute;
    opacity: 0; */
    /* customizable 
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    */
}
  
[title]:hover:before {
    
    
    /* customizable 
     opacity: 1;
    background: #E6E6E6;
    margin-top: -50px;
    margin-left: 20px;    
    height:auto;
    width:auto;
    text-decoration-color:black;*/
}
 #form_Title_Div div,#form_Decs_Div div,#lstObjectTypes_Div div,.formFieldsDiv div
 {
      display:inline-block;
      width:28%;
        }
#form_builder_logo,#use_label,.forms_logo{
      text-align:center;
      font-size: 180%;
      color:#0066FF;
        }
  
  
.avaibleFormsName{
     font-size: 130%;
     color:black;
}
  
  
.createNewForm,.formEditOptions,.createNewUser{
    text-decoration: none;
   
    color:#0066FF;
}
  
.img_createForm{
 margin-left:50px;
 margin-top:60px;
  
}
  
.img_viewData{
    height:18px;
     margin-left:20px;
}
  
  
  
a.fas,a.fas:link,a.fas:visited {
    text-decoration:none;
    color: #1b3663;
}
  
a.fas:hover {
    color: #5b9bd4;
}



table
{
    border-collapse:separate;
    /*border-spacing: 0 5px;*/
}
.objectList {
  /*  width: 100%; */
}
.objectList td, .objectList th 
{
/*    border:1px solid #c0c0c0; */
    padding:3px 4px 3px 4px;
    color:#000;
    /*background-clip: padding-box;*/
}
  
.objectList td {

    /* removed by mc
    background-color: #e0e0e0;
    border: solid 5px #e0e0e0;
     */
}
  
.hilightRowRed td {
    background-color: #f05050 !important;
    /*border: solid 5px #f05050;*/
}
  
.objectList tr td:first-child {
    border-radius: 5px 0px 0px 5px;
}
  
.objectList tr td:last-child {
    border-radius: 0px 5px 5px 0px;
}
  
.objectList th 
{
    text-align:left;
    padding-top:5px;
    /* padding-bottom:10px; */
    /*updated color and removed bgc and border mc*/
    color:black;
    /*background-color:#5b9bd4;
    border: solid 5px #5b9bd4;
    */
}
  
.objectList tr:hover td {
    background-color: #c0bebe;
  /*  border: solid 5px #c0bebe; */
}
  
#widgetMenu li {
    cursor: pointer;
    font-size:0.8em;
    padding:3px;
}
#widgetMenu li div:hover {
    background-color: #c0bebe;
}
.rowClickable {
    cursor: pointer;
}
  
.tdIcons {
    visibility: hidden;
    vertical-align: top;
    border: none;
    /*position: relative;
    left: -30px;
    right: 0px;*/
}
  
.objectList tr:hover .tdIcons {
    visibility: visible; 
    background-color: white;
}
  
.nothingInstructions {
    font-size:0.9em;
    background-color:#ff6e74;
    color:black;
    padding:5px;
}
    
#toolbar {
    font-size: 15px;
    font-weight: bold;
    background-color:#f2f2f2;
    margin: 0px;
    padding: 0px;
    border-bottom: 2px solid #0092cc;
    height: 45px;
    float: left;
    min-width: 960px;
    width: 100%;
}
#toolbar a {
    padding: 15px;
    float: left;
    margin: 0px;
}
#toolbar a,#toolbar a:link,#toolbar a:visited {
    text-decoration:none;
    color:#333333;
}
#toolbar a:hover, #toolbar a:hover, #toolbar a.selected {
    background-color:#ffffff;
    color: #35a9d7;
}
.form_builder_options_fields_div{
    
    margin-left:10px;
     margin-right:6px;
    margin-top:10px;
    height:auto;
    width:auto;
}
.form_builder_tools_btn:hover{
color:#4f97d1;
}
  
.form_builder_tools_btn {
    margin-left: 15px;
    border: none;
    background: none;
    padding: 5px;
    color: #424949;
    font-family: 'Roboto', sans-serif;
    outline: 0;
    /* width:200px;
     height:33px;
     margin-top:10px;
     margin-bottom:10px;
    background: #3e9cbf; 
    padding: 8px 14px 10px 10px; 
    border:1px solid #3e9cbf; 
    cursor:pointer; 
   style the text
    font-size:1em;
    font-family:Oswald, sans-serif;
    letter-spacing:.1em;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); 
    color: #fff;
    -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    -moz-border-radius: 10px;
    border-radius: 10px;*/
}
#btnSave {
    position: static;
    bottom: 50px;
    left: 300px;
    height:40px;
    font-size:1.3em;
     
}
#form_tools_menu > button {
    margin-left: 10px;
    border: none;
    background: none;
    font-family: 'Roboto', sans-serif;
    outline: none;
}
#builder_FormName {
    float: right;
    margin-top: -70px;
    margin-right: 160px;
    color: #4f97d1;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}
hr {
    margin-left:5px;
    height: 2px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
  
  
#QRFieldDiv,#barCodeFieldDiv{
    margin-top:30px;
   margin-left:100px;
}
#QRImageDiv{
    margin-top:30px;
}
    .odd_row{
             
    background-color:#e1e0de;
    text-align: left;
    font-family:Arial;
    font-size: 11px;
    height:40px;
         
        }
  
.even_row {
    background-color: #d1dbe4;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    height: 40px;
}
  
  
#formInfoPopUp{
      
 background-color:#E0E5F3;
  
  
  
}
.ui-dialog .ui-dialog-title {
  text-align: center;
  width: 100%;
}
.ui-dialog
{
    /* border:1px solid #1d3762; */
    border:11px solid #000;
    padding:0px;  
}

.ui-dialog .ui-dialog-titlebar {
    padding:2px !important;
    color:white;
    background-color: #1d3762 !important;
    font-size:1.1em !important;    
    border-bottom-right-radius:0px !important;
    border-bottom-left-radius:0px !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}


/*  
.ui-widget-header {
    background: white !important;
    border:none;
}
*/  
.ui-widget {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
}

.ui-tabs {
    padding:0px !important;
    border:none !important;
}
.ui-tabs .ui-widget-header {
    background: white !important;
    border:none;
}
.ui-corner-all {
    /* border-radius: 2px !important; */
}
.ui-tabs .ui-tabs-nav li a {
    padding: 4px 5px 4px 5px;
    font-size:.9em;
    color: #579bd4;
    border-radius:0px !important;
    border-bottom:solid 2px #e2e2e2;
    background-color:#fff !important;

}
.ui-tabs-active a {
    border-bottom:solid 2px #4985c5 !important;
    color:#000 !important;
    background-color:#fff !important;
}
.ui-tabs-anchor {
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    background: none !important;
    background-color:#e2e2e2 !important;
    border:none;
    border-radius: 0px !important;
  
}
  
.ui-state-active {
    /*border-bottom:solid 2px black !important;*/
    /*font-weight:bold !important;*/
}
#lstObjectTypes {
    border-radius: 5px;
    border: 1px solid #73AD21;
    padding: 10px; 
    width:500px;
    height:auto;
    margin-bottom: 15px; 
    background-color:#E8F0F2;
                 }
  
  
#formInfoField{
          position:absolute;
          margin-left:20px;
  
}
.formInfoFields{
    margin-left:30px;
     float:right;  
      width:300px;
    
      border:1.5px solid #b5b5b5;
    
     border-radius:4px;
   
}
 
.interior_toolbar {
    display:flex;
    font-size:.8em;
    background-color:#e0e0e0;
    padding:3px;
    width:100%;
}
.interior_toolbar > div {
    flex:0;
    padding: 0px 10px 0px 10px;
    white-space:nowrap;
}
.interior_toolbar > div :not(:last-child) {
    border-right:solid 1px white;
}
.interior_toolbar > div :last-child {
    padding: 0px 10px 0px 5px;
}

.blink {
  animation: blinker 1s linear infinite;
}
  
@-moz-keyframes blinker {  
  50% { opacity: 0; }
}
  
@-webkit-keyframes blinker {  
  50% { opacity: 0; }
}
  
@keyframes blinker {  
  50% { opacity: 0; }
}
  

  
.material-icons.md-18 {
    font-size: 18px;
}
  
.material-icons.md-24 {
    font-size: 24px;
}
  
.material-icons.md-36 {
    font-size: 36px;
}
  
.material-icons.md-48 {
    font-size: 48px;
}
  
@media screen and (max-width: 620px) {
    #username {
        display: none !important;
    }
}


#tblWidgets 
{ 
    border:0px; 
    width:100%; 
    border-collapse: separate; 
    border-spacing: 20px;
}

.tblWidgets_row td {
    border: solid 1px #e2e5ea; padding:0px;    
}

.widget_title {
    padding:3px;
    background-color:#f5f5f7;
    font-size:.9em;
    font-weight:bold;
}

.widget_title a {
    text-decoration:none;
    color: silver;
}

.widget_title:after {
    content: '';
    display: block;
    clear: both;
}
.widget_container {
    padding:10px;
}
.widget {
    width:100%;
    padding:0px;
    margin:0px;
}
.widget_subtitle {
    font-size:.8em;
    margin-top:2px;
}
.widget_row {
    cursor:pointer;
    font-size:12px;
    border:solid 1px silver;
    background-color:#f1f2f5;
    margin:2px;
}
.widget_row td {
    padding:2px;
    border:none;
}
.widget_row:hover {
    background-color:#b6ccd7;
}

.tablesorter-default th, .tablesorter-default thead td {
    /* removed bg-color mc
   background-color:gray !important
  */
    background-color:none !important;
}

.tablesorter-default td {
     padding-left:5px !important;
     padding-right:5px !important;
     vertical-align:top;
}

.tablesorter-static td {
    background-color:lightgray !important;
}

.noBottomBorder {
    border-bottom:none !important;
}
.content-inset {
    padding:10px;
}

/*Used for rotating the expando expanders */
.rotate90 i{
    transform:rotate(90deg);
     border-left:none;
}


.div-table-row {
    display: table-row;
    width: auto;
    clear: both;
}

.div-table-col-l {
    float: left; /* fix for  buggy browsers */
    display: table-column;
    width: 100px;
    padding:2px;
}

.div-table-col-r {
    float: left; /* fix for  buggy browsers */
    display: table-column;
    width: 200px;
    padding:2px;
}

/* Spinner animation */

/*
$offset: 187;
$duration: 1.4s;
    */
.spinner {
  animation: rotator 1.4s linear infinite; /* 1.4s duration */
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: 187; /* offset */
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite, 
    colors 5.6s ease-in-out infinite;
}

@keyframes colors {
	0% { stroke: #4285F4; }
	25% { stroke: #DE3E35; }
	50% { stroke: #F7C223; }
	75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: 187; }
 50% {
   stroke-dashoffset: 47;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: 187;
   transform:rotate(450deg);
 }
}