/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : Apr 8, 2016, 10:47:33 AM
    Author     : CMSHelplive
*/


/*---------Common Elements---------------*/
.cmagic * { box-sizing: border-box;}


/*------------- cmagic Elements --------------*/



.cmagic {
    
    display: block;
    float: left;
    width: 100%;
}

.cmagic input {height: auto !important;}
.cm_spacing
{
    margin-top:100px;
    clear: both;
    width: 100%;
    float: left;
}
.cm_divider{
    width:100%;
    size:8px;
   clear: both;
    float: left;
}


.cmagic sup {color: #ff6c6c;}

/*.cmagic input[type=text], .cmagic textarea, .cmagic select, .cmagic input[type=password] {
    height: 35px;
    font-size: 18px;
    color: rgb(150,150,150);
    width: 90%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid rgb(225,225,225);
}*/

.cmagic input[type=text].warning, input[type=password].warning, textarea.warning, select.warning, .cmagic input[type=password].warning {
    border-width: 1px;
    border-style: solid;
    border-color: #e89d9d;
    color: #ff6c6c;
    
}

.cmrow {position: relative !important;}
.cmagic .cmrow li { list-style:none;}

#ui-datepicker-div .ui-datepicker-calendar td {    padding: 0px;    border-width: 0 0px 0px 0;}
#ui-datepicker-div .ui-datepicker-calendar th {    padding: 0px;    border-width: 0 0px 0px 0;}

#ui-datepicker-div.ui-widget-content {    width: 230px;}



.cmagic .cmradio {
    display: block;
    float: left;
    list-style: none;
    width: 90%;
}

.cmagic .cmradio .cm-radio-option {
    display: inline-block;
    float: left;
    padding-right: 10px;
}

.cmagic .cmradio .cm-radio-option::after {
    content: " ";
}


.cmagic input[type=submit] {
    display: inline-block;
    float: left;
}


.cmagic textarea {
    resize: both;
    z-index: 999999;
    height: 220px;
}




.cmagic form.cmagic-form {
    width: 100%; 
    float: left; 
}


.cmheader {
    display: block;
    font-size: 18px;
    padding: 20px;
   
}

.cmsubheader { 
    display: block;
    float: left;
    padding: 5px 5px 5px 20px;
    margin-bottom: 20px;
    width: 100%;
    font-size: 11px;
}

.cmrow {
    display: block; 
    float: left;
    position: inherit;
    padding: 5px 0px 5px 0px; 
    min-height: 60px; 
    width: 100%;
}

.cmfield {width:50%;}
.cminput {width:50%; padding: 0px; margin: 0px;}

.cmfield, .cminput {
    display: inline-block; 
    float: left;
    vertical-align: middle;
    min-height: inherit;
    padding: 5px;
}

.cminput .errortext {
    width: 100%;
    display: block;
    float: left;
    text-transform: uppercase;
    color: #ff6c6c;
    font-size: 12px;
}

.cmfield {
    padding-top: 10px;
    
}


.cmagic .buttonarea {
    width: 100%;
    display: block;
    float: left;
    padding: 15px;
}

.cmagic .cmcontent .cminput input[type="text"], .cmagic .cmcontent .cminput input[type="password"], .cmagic .cmcontent .cminput input[type="email"],.cmagic .cmcontent .cminput input[type=number], textarea,  .cmagic .cmcontent .cminput select{  width:100%;}


.cmagic ul.cmradio {margin: 0px;
    padding: 0px;}

.cmagic .cm_actions a {
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.cmagic .cm_actions a:hover {
    cursor: pointer;
}


/*----cmagic Hover Effects----*/


.cmagic input[type=text]:focus, .cmagic textarea:focus, .cmagic select:focus, .cmagic input[type=password]  {
    outline: inherit;
    
}

/*------------Adjustments for smaller screens-----------------*/

@media screen and (max-width: 700px) {
    .cmfield, .cminput {
    display: block;
    float: left;
    width: 100%;
    margin-top: 5px;
    }
    
    .cmrow {
        min-height: 30px;
    }
    
    
    
    .cmagic .cmradio .cm-radio-option {
        width: 50%;
        padding: 0 0 5px 10px;
    }
    

    .cmagic {
        margin: auto;
    }
    
}
    
/*----Terms and Conditions---*/
div.cm_terms_checkbox {float: left;}
div#cm_terms_textarea_without_scroll {display: inline-block; float: left; margin-left: 5px;}


div#cm_add_repeatable_field.cm_actions {cursor: pointer;}
sup.required {color: red;}


/*----Error Notifications----*/

label.cm-form-field-invalid-msg {
    padding: 3px 8px;
    display: inline-block;
    background-color: #d2f3bf;
    color: #6faf49;
    border: 1px solid #b0ed98;
    margin: 5px 0 0 0;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    animation: cm-warning 1s ease-out 1;
    -webkit-animation: cm-warning 1s ease-out 1;
    -moz-animation: cm-warning 1s ease-out 1;
    -o-animation: cm-warning 1s ease-out 1;
    float:left;
}

label.cm-form-field-invalid-msg::before{content: "⚠ "; font-size: 14px;}

@keyframes cm-warning {
    0% {transform: translateY(2000px);}
    100% {transform: translateY(0px);}    
}

@-webkit-keyframes cm-warning {
    0% {transform: translateY(2000px);}
    100% {transform: translateY(0px);}    
}

@-moz-keyframes cm-warning {
    0% {transform: translateY(2000px);}
    100% {transform: translateY(0px);}    
}

@-o-keyframes cm-warning {
    0% {transform: translateY(2000px);}
    100% {transform: translateY(0px);}    
}

.alert-error {  
    background-color: #d2f3bf;
    color: #6faf49;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    padding: 20px;
    border: 1px solid #6faf49;
}

.alert-error ul {margin: 0px; list-style: none;}
.alert-error a {display: inline-block; float: right; box-shadow: 0px !important; color: #6faf49; text-align: center; font-size: 20px;}


/*----Terms and Conditions---*/
div.cm_terms_checkbox {float: left;}
div#cm_terms_textarea_without_scroll {display: inline-block; float: left; margin-left: 5px;}

.regmagic_embed body { background-color: transparent !important;}

.cmagic .buttonarea input[disabled] { float:left;}

/* ----------------20-07-2016----------------- */

.cmagic .cminput .cm_field_type_repeatable_container .appendable_options .cm_actions a {    margin-bottom: 6px;}

/*----Help Text on fields. Invocations on ../js/script_cm_front.js line no 200----*/

.cmagic .cmnote {
    width: 50%;
    margin-left: 50%;
}

.cm-floating-page .cm-floating-page-content .cmagic { float: none; width: 97%; margin: 0px auto;}