html, body{height: 100%; width:100%; overflow:hidden; margin: 0; padding: 0;}
#s1-container{width: 100%; height: 100%; margin: 0 auto;}
#s1-container .modal { display: none; position: absolute; z-index: 5; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align: center; }
#s1-container .modal .modal-content { position:relative; background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 70%; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
#s1-container .modal .close { position: absolute; color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;  top: -10px;right: -10px; background: #fff;width: 30px;height: 30px;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#s1-container .modal .close:hover, .modal .close:focus { color: #000; text-decoration: none; cursor: pointer; }
#s1-container .modal .modal-message { margin: 10px; position: relative; font-size: 14px; }
#s1-container .modal .modal-loading{display:none; margin:0 auto;}
#s1-container .modal .modal-buttons{display:none; }
#s1-container .modal.modal-close-chat .modal-buttons{ display: block !important;}
#s1-container .modal.show-loading .modal-loading{ display: block !important;}
#s1-container .modal button{ box-sizing: border-box; width: 100px; text-align: center !important; text-decoration: none;  line-height: 1; cursor: pointer; background: #fff; color: #2C2C2C;  border: 1px solid #A3A3A3; padding: 10px; margin: 2px auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#s1-container .modal button:hover{ opacity: 0.6; filter: alpha(opacity=60); }
#s1-cf-wrapper .hidden{display:none !important; }
#s1-cf-wrapper .inline {margin: 5px; display: inline-block;}
#s1-cf-wrapper .center {text-align: center;}
#s1-cf-wrapper .left {text-align: left;}
#s1-cf-wrapper .right {text-align: right;}
#s1-cf-wrapper .label{display:none; color: #000; text-align: left; width: 100%; font-size: 13px;}
#s1-cf-wrapper.show-labels .label, #s1-cf-wrapper .label.not-hidden{display:block;}
#s1-cf-wrapper{ box-sizing: border-box; font-family: Arial, Sans-Serif; position: relative; background: #e8e8e8; width: 100%; height:100%; overflow: auto;}
#s1-cf-wrapper label, #s1-cf-wrapper a, #s1-cf-wrapper input, #s1-cf-wrapper button, #s1-cf-wrapper p, #s1-cf-wrapper select, #s1-cf-wrapper textarea{ font-family:  Arial, Sans-Serif; margin: 0; box-sizing: border-box; font-size: 13px; vertical-align: middle; font-weight: normal;}
#s1-cf-wrapper input + span { margin-left: 5px; }
#s1-cf-wrapper textarea{resize: none; width: 100%; height: 60px;}
#s1-cf-wrapper .material-icons{font-size: 20px;}
#s1-cf-wrapper .attach-progress-wrapper{ position: absolute; z-index: 1031; left: 0; top: 0; width: 100%; height: 3px; }
#s1-cf-wrapper .attach-progress-bar{ display: block; position: absolute; left: 0px; width: 0px; height: 100%; background-color: #FF0000;}
#s1-cf-wrapper .s1-form-panel { padding: 0 10px;  }
#s1-cf-wrapper .field-block{ position:relative; margin: 10px 0px; clear: both;}
#s1-cf-wrapper .field-block.inline { margin: 0px 5px 10px 5px; clear: none; float: left; }
#s1-cf-wrapper .field-block.highlight{ background: #f3f3f3; }
#s1-cf-wrapper input[type='text'], #s1-cf-wrapper textarea{ display: block; width: 100%; padding: 5px 5px; font-size: 12px; line-height: 12px; color: #555; background-color: #ffffff; background-image: none;height: 30px; border-radius: 0; border:1px solid #464646; box-sizing: border-box;  outline: none;}
#s1-cf-wrapper select{ height: 30px; width: 100%; background: #f0f4fb; border: 1px solid #f0f4fb; color: #000; margin: 0px 0px;}
#s1-cf-wrapper input:active, #s1-cf-wrapper input:focus, #s1-cf-wrapper textarea:focus { border: 1px solid #c4161c; }
#s1-cf-wrapper button { width: 140px; outline: none; background-color: #880c10; border: none; height: 30px; font-weight: bold; font-size: 12px; color: #ffffff; cursor: pointer; box-sizing: border-box; margin:5px; }
#s1-cf-wrapper input:disabled, input[disabled] { cursor: not-allowed !important;}
#s1-cf-wrapper .small{ font-size: 11px; margin: 2px 10px; }
#s1-cf-wrapper .error{ color: #FF0000; }
#s1-cf-wrapper .success{ color: #1A7818; }
#s1-cf-wrapper label.inline {margin: 5px; display: inline-block;}
#s1_upload_list { margin: 5px 0px; padding: 0; }
#s1_upload_list li { list-style: none; border: 1px solid #ccc; margin: 2px; background: #FBFBFB; padding: 4px 25px 4px 10px; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#s1_upload_list li label { list-style: none; color: #5C5C5C; }
#s1_upload_list li i { position: absolute;  margin: 2px; top: 3px; right: 5px; font-size: 17px !important; cursor: pointer;}

/*--Template 1 styles --*/
.template1 #s1-cf-wrapper{background: #ffffff;}
.template1 #s1-cf-wrapper input[type='text'], .template1 #s1-cf-wrapper textarea{ color: #000; background-color: #f0f4fb; border-radius: 0; border:1px solid #f0f4fb; outline: none; }
.template1 #s1-cf-wrapper input:active, .template1 #s1-cf-wrapper input:focus, .template1 #s1-cf-wrapper textarea:active, .template1 #s1-cf-wrapper textarea:focus { border: 1px solid #0555ad; }
.template1 #s1-cf-wrapper select{ height: 30px; width: 100%; background: #f0f4fb; border: 1px solid #f0f4fb; color: #000; margin: 0px 0px;}
.template1 #s1-cf-wrapper button { width: 100px; background-color: #005abb; height: 30px; font-weight: bold; font-size: 12px; color: #ffffff; cursor: pointer; outline: none; box-sizing: border-box; border: 1px solid #005abb; border-radius: 10px;}

/*--Template 2 styles --*/
.template2 #s1-cf-wrapper{background: #ffffff;}
.template2 #s1-cf-wrapper input[type='text'], .template2 #s1-cf-wrapper textarea{ background-color: #fff; border-radius: 5px; border:1px solid #ccc;  outline: none;}
.template2 #s1-cf-wrapper input:active, .template2 #s1-cf-wrapper input:focus, .template2 #s1-cf-wrapper textarea:active, .template2 #s1-cf-wrapper textarea:focus { border: 1px solid #0555ad; }
.template2 #s1-cf-wrapper select{ height: 30px; width: 100%; background: #fff; border: 1px solid #ccc; color: #000; margin: 0px 0px; border-radius: 5px;}
.template2 #s1-cf-wrapper button { width: 100px; background-color: #005abb; height: 30px; font-weight: bold; font-size: 12px; color: #ffffff; cursor: pointer; outline: none; box-sizing: border-box; border: 1px solid #005abb; border-radius: 10px;}


/*--Template 3 styles --*/
.template3 #s1-cf-wrapper{background: #ffffff;}
.template3 #s1-cf-wrapper input[type='text'], .template3 #s1-cf-wrapper textarea{ background-color: #fff; border-radius: 5px; border:1px solid #ccc;  outline: none;}
.template3 #s1-cf-wrapper input:active, .template3 #s1-cf-wrapper input:focus, .template3 #s1-cf-wrapper textarea:active, .template3 #s1-cf-wrapper textarea:focus { border: 1px solid #0555ad; }
.template3 #s1-cf-wrapper select{ height: 30px; width: 100%; background: #fff; border: 1px solid #ccc; color: #000; margin: 0px 0px;border-radius: 5px;}
.template3 #s1-cf-wrapper button { width: 100px; background-color: #005abb; height: 30px; font-weight: bold; font-size: 12px; color: #ffffff; cursor: pointer; outline: none; box-sizing: border-box; border: 1px solid #005abb; border-radius: 10px;}