/*
 * Main style sheet for CQFS admin pages and CPT fields
 * @since 1.0
 */

/* loading/working/sending/busy animation */
.cqfs-loader {
    box-sizing: border-box;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 26px;
    height: 26px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}
  
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* loading/working/sending/busy animation */

/* admin settings page */
.cqfs-admin .cqfs-fields{
    margin: 0;
}
.cqfs-admin{
    display: block;
}
.cqfs-admin .cqfs-field.checkbox{
    display: flex;
}
.cqfs-admin .cqfs-field.checkbox .cqfs-label {
    order: 2;
    margin-left: 5px;
}
.cqfs-admin .form-wrap{
    padding: 20px 0;
    margin-right: 20px;
    border-bottom: 2px solid #ffffff;
}

.cqfs-admin .result-page-status .cqfs-return-msg{
    margin-top: 0;
}
.cqfs-admin .result-page-status p{
    font-size: 16px;
}
.cqfs-admin .cqfs-submission{
    margin-top: 30px;
}
.cqfs-admin .cqfs-submission .cqfs-loader{
    margin: 0 20px;
    border-color: #ffffff;
    border-top: 3px solid #3498db;
}
/* -- admin settings -- */

.cqfs-fields{
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}
@media (min-width:768px){
    .cqfs-admin{
        display: flex;
        flex-direction: row;
    }
    .cqfs-admin .content{
        width: 70%;
    }
    .cqfs-admin .sidebar{
        width: 30%;
    }
}

.alert-warnning{
    border: 2px solid #ffb900;
}
.alert-ok{
    border: 2px solid #46b450;
}
.cqfs-fields .cqfs-info {
    background: #ffffff;
    padding: 15px;
}

.cqfs-fields .cqfs-info-text {
    font-size: 16px;
    margin-bottom: 0;
}

.cqfs-fields,
.cqfs-field,
.cqfs-field .cqfs-label,
.cqfs-field .cqfs-input 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

.cqfs-fields>.cqfs-field {
    position: relative;
    margin: 0;
    padding: 15px 12px;
    border-top: #eeeeee solid 1px;
}

.cqfs-field {
    width: 100%;
    flex-grow: 1;
    margin: 15px 0;
    clear: both
}

.cqfs-field.half{
    width: 50%;
}

.cqfs-field p.description {
    display: block;
    margin: 0;
    padding: 0
}

.cqfs-field .cqfs-required{
    color: #dc3232;
    margin-left: 3px;
}

.cqfs-field .cqfs-label {
    vertical-align: top;
    margin: 0 0 10px
}

.cqfs-field .cqfs-label label {
    display: block;
    font-weight: bold;
    margin: 0 0 3px;
    padding: 0
}

.cqfs-field .cqfs-label:empty {
    margin-bottom: 0
}

.cqfs-field .cqfs-input {
    vertical-align: top
}

.cqfs-field .cqfs-input>p.description {
    margin-top: 5px
}

.cqfs-field input[type="text"],
.cqfs-field input[type="password"],
.cqfs-field input[type="date"],
.cqfs-field input[type="datetime"],
.cqfs-field input[type="datetime-local"],
.cqfs-field input[type="email"],
.cqfs-field input[type="month"],
.cqfs-field input[type="number"],
.cqfs-field input[type="search"],
.cqfs-field input[type="tel"],
.cqfs-field input[type="time"],
.cqfs-field input[type="url"],
.cqfs-field input[type="week"],
.cqfs-field textarea,
.cqfs-field select 
{
    width: 100%;
    padding: 4px 8px;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4
}

.cqfs-field textarea {
    resize: vertical
}

body.cqfs-browser-firefox .cqfs-field select {
    padding: 4px 5px
}

.cqfs-input-prepend,
.cqfs-input-append,
.cqfs-input-wrap 
{
    box-sizing: border-box
}

.cqfs-input-prepend,
.cqfs-input-append 
{
    font-size: 14px;
    line-height: 1.4;
    padding: 4px 8px;
    background: #f5f5f5;
    border: #7e8993 solid 1px;
    min-height: 30px
}

.cqfs-input-prepend {
    float: left;
    border-right-width: 0;
    border-radius: 3px 0 0 3px
}

.cqfs-input-append {
    float: right;
    border-left-width: 0;
    border-radius: 0 3px 3px 0
}

.cqfs-input-wrap {
    position: relative;
    overflow: hidden
}

input.cqfs-is-prepended {
    border-radius: 0 3px 3px 0 !important
}

input.cqfs-is-appended {
    border-radius: 3px 0 0 3px !important
}

input.cqfs-is-prepended.cqfs-is-appended {
    border-radius: 0 !important
}


html[dir="rtl"] .cqfs-input-append {
    border-left-width: 1px;
    border-right-width: 0;
    border-radius: 3px 0 0 3px;
    float: left
}

html[dir="rtl"] input.cqfs-is-prepended {
    border-radius: 3px 0 0 3px !important
}

html[dir="rtl"] input.cqfs-is-appended {
    border-radius: 0 3px 3px 0 !important
}

html[dir="rtl"] input.cqfs-is-prepended.cqfs-is-appended {
    border-radius: 0 !important
}

#wp-link-backdrop {
    z-index: 900000 !important
}

#wp-link-wrap {
    z-index: 900001 !important
}

.cqfs-selection-error {
    background: #ffebe8;
    border: 1px solid #c00;
    border-radius: 3px;
    padding: 8px;
    margin: 20px 0 0
}

.cqfs-selection-error .selection-error-label {
    background: #CC0000;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    padding: 2px 4px
}

.cqfs-selection-error .selection-error-message {
    color: #b44;
    display: block;
    padding-top: 8px;
    word-wrap: break-word;
    white-space: pre-wrap
}

.hidden-by-conditional-logic {
    display: none !important
}

.cqfs-radio-list{
    list-style: none;
}

.cqfs-radio-list.horizontal li {
    display: inline-block;
    margin-right: 15px;
}

/* cpt - cqfs_* */
.cqfs-field .cqfs-large-input:read-only {
    padding: 5px 15px;
    background: #ffffff;
    font-size: 1.4em;
    line-height: 2;
}

#cqfs_question_group.postbox > .handlediv,
#cqfs_question_group.postbox > .hndle,
#cqfs_question_group.postbox > .postbox-header,
#cqfs_build_group.postbox > .handlediv,
#cqfs_build_group.postbox > .hndle,
#cqfs_build_group.postbox > .postbox-header,
#cqfs_entry_group.postbox > .handlediv,
#cqfs_entry_group.postbox > .hndle,
#cqfs_entry_group.postbox > .postbox-header
{
    display: none
}

#cqfs_question_group.postbox,
#cqfs_build_group.postbox,
#cqfs_entry_group.postbox
{
    background: transparent;
    border: none
}

#cqfs_question_group.postbox .inside,
#cqfs_build_group.postbox .inside,
#cqfs_entry_group.postbox .inside
{
    padding: 0;
    margin-top: 0;
}

/* menu pages */
li#toplevel_page_cqfs-post-types ul li:nth-child(2n+1) {
    padding-bottom: 4px;
    border-bottom: 1px solid #6b6b6b;
}

li#toplevel_page_cqfs-post-types ul li:last-child{
    padding-bottom: 0;
    border-bottom: none;
}

/*
* CQFS Modal Styles
*/
/* The Modal (background) */
.cqfs-modal {
    position: fixed;
    z-index: 100;
    padding-top: 100px;
    margin-left: 160px;
    left: 0;
    top: 0;
    width: calc(100% - 160px);
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    font-size: 16px;
}

.cqfs-modal p,
.cqfs-modal .button
{
    font-size: 16px;
}
  
/* Modal Content */
.cqfs-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.6s;
    animation-name: animatetop;
    animation-duration: 0.6s
}

.folded .cqfs-modal{
    margin-left: 36px;
    width: calc(100% - 36px);
}

@media (max-width: 960px){
    .auto-fold .cqfs-modal {
        margin-left: 36px;
        width: calc(100% - 36px);
    }
}

@media (max-width: 782px){
    .auto-fold .cqfs-modal {
        margin-left: 0;
        width: 100%;
    }
    .cqfs-modal-content {
        width: 80%;
    }
}

  
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
  
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
  
/* The Modal style */
.cqfs-close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 10px;
}
  
.cqfs-close:hover,
.cqfs-close:focus {
    color: #dddddd;
    text-decoration: none;
    cursor: pointer;
}
  
.cqfs-modal-header {
    padding: 20px;
    background-color: #23282d;
    color: white;
}

.cqfs-modal-header h3{
    color: #ffffff;
    margin: 0;
}
  
.cqfs-modal-body {
    padding: 20px;
}

.cqfs-modal-body p{
    margin: 0 0 20px;
}

.cqfs-modal-body p:last-child{
    margin-bottom: 0;
}

.cqfs-alert-message{
    margin-top: 20px;
}

.cqfs-alert-message.failed,
.cqfs-alert-message.failed p,
.cqfs-alert-message.failed span,
.cqfs-alert-message.failed a
{
    color: #dc3232;
}

.cqfs-alert-message.success,
.cqfs-alert-message.success p,
.cqfs-alert-message.success span,
.cqfs-alert-message.success a
{
    color: #46b450;
}

.cqfs-return-msg .cqfs-icon {
    margin: 2px 5px 0 0;
}

.cqfs-return-msg{
    margin-top: 20px;
}

.cqfs-return-msg p:first-child{
    margin-top: 0;
}
.cqfs-return-msg p:last-child{
    margin-bottom: 0;
}

.cqfs-return-msg.success {
    padding: 15px;
    background: white;
    border: 2px solid #46b450;
}

.cqfs-return-msg.failure {
    padding: 15px;
    background: white;
    border: 2px solid #dc3232;
}

.cqfs-icon.success-icon::before{
    content: "\2714";
    display: inline-block;
    box-sizing: border-box;
    color: white;
    width: 25px;
    height: 25px;
    padding: 3px;
    background: #46b450;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    font-size: 18px;
}

.cqfs-icon.failure-icon::before {
    content: "\2716";
    display: inline-block;
    box-sizing: border-box;
    color: white;
    width: 25px;
    height: 25px;
    padding: 3px;
    background: #dc3232;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    font-size: 18px;
}

.cqfs-modal-footer {
    padding: 20px;
    background-color: #23282d;
    color: white;
}

/* utilities */
.transition {
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.display-none{
    display: none !important;
}
.inline-block{
    display: inline-block;
}

.cqfs-submission {
    display: flex;
    align-items: center;
}

.cqfs-submission .cqfs-loader{
    margin: 0 10px;
}

/* sidebar */

.cqfs-admin .sidebar-content{
    margin: 20px;
    padding: 20px;
    background: #ffffff;
}