.cmagic * {box-sizing: border-box;}



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

.difl {display: inline-block; float: left;}

.difr {display: inline-block; float: right;}

.cm-pad-10 {padding: 10px;}

.cm-accent-bg {background-color: #e1e1e1; color: white;}



.cm-button {

    padding: 10px;

    width: 100px !important;

    cursor: pointer;

    font-size: 14px;

    border-width: 0px;

}



.cm-border {

    border-color: #e1e1e1;

    border-style: solid;

}



.cm-shadow-10 {

    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);

    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.2);

    -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.2);

}



.cm-rounded-corners {

    border-radius: 6px;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    -ms-border-radius: 6px;

    -o-border-radius: 6px;

    overflow: hidden;

}



/* Light theme*/

.cm-grey-box, cm-white-box {

    border-style: solid;

    border-color: #e1e1e1;

    border-width: 0px;

}



.cm-grey-box {background-color: #fafafa; border-width: 1px;}

.cm-white-box {background-color: #ffffff;}





/*---------------------Floating Slideout Page----------------------*/



.cm-floating-page {

    overflow: auto;

    width: 400px;

    position: fixed !important;

    top: 2%;

    right: 20px;

    height: 96%;

    transition: 0.4s;

    /* color: #646464 !important;*/

    background-color: rgba(250,250,250,0.9);

  

}



.logged-in .cm-floating-page { z-index: 999999;}


.csstransforms .cm-floating-page {transform: translateX(150%);}

.no-csstransforms .cm-floating-page {display: none;}



@media only screen and (max-width: 1270px) and (min-width: 960px) {

    .cm-floating-page {width: 400px;}

}



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

    .cm-floating-page {width: 90%; right: 5%;}

    .csstransforms .cm-floating-page {transform: translateX(0) translateY(150%);}

}



.cm-floating-page-top {

    border-width: 0px 0px 1px 0px;

    padding: 15px;

    text-transform: uppercase;

    max-height: 10%;

    font-size: 14px;

}



.cm-floating-page-content {padding: 5% 10%; overflow-y: scroll; max-height: 80%;}



.cm-floating-page-bottom {

    border-width: 1px 0px 0px 0px;

    padding: 15px;

    position: absolute;

    bottom: 0px;

    opacity: 0.95;

}





button#cm-panel-close {

    -webkit-appearance: none;

    -moz-appearance: none;

    background-color: #ff6c6c;

    color: #FFF;

    border: none;

    float: right;

    background-image: -moz-linear-gradient( 90deg, rgb(215,87,87) 0%, rgb(236,95,95) 100%);

    background-image: -webkit-linear-gradient( 90deg, rgb(215,87,87) 0%, rgb(236,95,95) 100%);

    background-image: -ms-linear-gradient( 90deg, rgb(215,87,87) 0%, rgb(236,95,95) 100%);

    background-image: -o-linear-gradient( 90deg, rgb(215,87,87) 0%, rgb(236,95,95) 100%);

}



/*--------------------------Pop Up Menu----------------------------*/



.cm-magic-popup {

    position: fixed;

    right: 2%;

    bottom: 5%;

    z-index: 9999999;

    width: 200px;

    font-size: 14px;

    

}



.csstransforms .cm-popup-menu { 

    margin-bottom: 20px;

    transition: 0.4s;

    z-index: 99999999;

    transform: translateY(1000px);

    overflow: hidden;

}



.nocsstransforms .cm-popup-menu {

    display: none;

    margin-bottom: 20px;

    transition: 0.4s;

    z-index: 99999999;

    overflow: hidden;

}



img.cm-menu-userimage {

    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;

    -o-border-radius: 100%;

    -ms-border-radius: 100%;

    width: 33%;

}



.cm-menu-user-details {width: 66%; padding: 10px 5px 10px 15px;}



.cm-popup-item {padding: 15px; transition: 0.1s; cursor: pointer;}

.cm-popup-item a { color: inherit;}

.cm-popup-item:first-child {border-width: 0px 0px 1px 0px;}

.cm-popup-item:hover {

    background-color: rgba(150,150,150,0.1); 

}



.cm-magic-popup-button {

    position: relative;

    border-radius: 100%;

    width: 86px;

    height: 86px;

    cursor: pointer;

    color: white;

    overflow: hidden;

    margin: 0px 57px;

    transition: 0.2s;

}



.csstransforms .cm-magic-popup-button:hover {transform: rotate(360deg);}

.no-csstransforms .cm-magic-popup-button:hover {opacity: 0.8;}



.cm-magic-popup-button img {

  /*opacity: 0.6;*/

    max-width: 100%;

    height: auto;

}



/*--------------------------------Login Panel---------------------------*/



.cm-floating-page-login {

    position: relative;

    margin-top: 25%;

    width: 100%;

    text-align: center;

}





.cm-floating-page-login .cm-login-panel-fields input {

    width: 80%;

    margin-left: 10%;

    padding: 10px;

}



.csscalc .cm-floating-page-login .cm-login-panel-fields button {

    margin: 5% calc(50% - 50px);

}



.no-csscalc .cm-floating-page-login .cm-login-panel-fields button {

    margin: 5% 45%;

}





.cm-login-panel-user-image {

    padding: 20px;

    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

    overflow: hidden;

    width: 50%;

    margin-left: 25%;

}





.cm-login-panel-user-image img.cm-placeholder-user-image {

    border: 0px;

    box-shadow: 0px;

    padding: 0px;

    border-radius: 100%;

    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

}







/*------------------------------Submission Cards-------------------------------*/

#cm-submissions-panel {}



.cm-submission-card {

    overflow: hidden; 

    display: block;

    float: left;

    width: 100%;  

    font-size: 12px; 

    margin-bottom: 20px;

    transition: 1s;

}



.cm-submission-card-title {

    text-align: center; 

    border-bottom-width: 0px; 

    padding: 10px; 

    font-size: 14px;

}



.cm-submission-card-content {width: 100%; padding: 15px 0px;}

.cm-submission-icon {width: 20%; height: auto;}

.cm-submission-icon img {max-width: 80%; height: auto; padding-left: 10%;}

.cm-submission-details {width: 60%; text-align: center;}



/*------------------------------Transactions Panel-----------------------------*/

.cm-transaction-title {text-align: center; border-width: 0px; padding: 15px 10px; font-size: 14px;}

span.cm-transaction-success,

span.cm-transaction-refunded,

span.cm-transaction-pending {

    color: #fff; 

    padding: 3px 8px;

}



.cm_txn_status {background-color: orange; padding: 2px 5px;}

span.cm-transaction-succeeded, span.cm-transaction-Completed {background-color: #28b86f;}

span.cm-transaction-failed,span.cm-transaction-cancelled,span.cm-transaction-Denied,span.cm-transaction-Failed,span.cm-transaction-Refunded,span.cm-transaction-Reversed,span.cm-transaction-Voided {background-color: #ddd;}

span.cm-transaction-In-Progress, span.cm-transaction-Pending,span.cm-transaction-Processed,span.cm-transaction-pending {background-color: orange; padding: 3px 8px; color: white;}



/*-------------------------------Register Form-----------------------------------*/

form.cm-panel-form {

    background-color: transparent;

    color: inherit;

    border: 0px;

}

.cm-panel-row {margin-bottom: 20px;}

form.cm-panel-form label {padding: 10px; width: 40%;}



form.cm-panel-form input,

form.cm-panel-form textarea,

form.cm-panel-form select {

    padding: 10px;

    width: 60%;

    font-size: inherit;

} 



form.cm-panel-form textarea {height: 200px; resize: none; overflow: auto;}



form.cm-panel-form select {

    -moz-appearance: none;

    -webkit-appearance: none;

}



.csscalc form.cm-panel-form input[type=submit] {margin-left: calc(50% - 50px);}



.no-csscalc {margin-left: 45%;}



/*Embed Fixing*/

iframe.regmagic_embed {

    border: none;

    overflow: -moz-scrollbars-none;

    -ms-overflow-style: none;

    overflow: hidden;

}



iframe.regmagic_embed::-webkit-scrollbar {display: none;}

iframe.regmagic_embed body {background-color: #FFF !important;}



.cmformpage {display: block; float: left;}



.cmagic form.cmagic-form {height: 100%;}

.cmagic .cm-embed-note {

    position: relative;

    display: none;

    font-size: 12px;

    float: left;

    display: none;

    line-height: 12px;

    padding: 10px;

    background-color: beige;

    border: 1px solid bisque;

    font-family: sans-serif;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    -o-border-radius: 4px;

    -ms-border-radius: 4px;

}



/*----------------------User Account Panel-------------------------------*/

#cm-user-greeting {padding: 10px; text-align: center; margin-bottom: 20px; font-size: 18px;}

#cm-greeting-text {font-size: 22px;}





.cm-user-panel-user-image {

    width: 60%;

    margin-left: 40%;

    overflow: hidden;

    margin-bottom: 50px;

}



.cm-user-panel-user-image img {

    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;

    -ms-border-radius: 100%;

    -o-border-radius: 100%;

}



.cm-user-panel-user-details {

    width: 100%;

    font-size: 14px;

}

.cm-user-panel-user-details .cm-panel-row {margin-bottom: 0px; border-width: 0px;}

.cm-user-panel-user-details .cm-panel-row:nth-child(odd) {background-color: rgba(0,0,0,0.08);}



.cm-panel-field,

.cm-panel-value {

    width: 50%;

    padding: 15px;

    vertical-align: middle;

    word-break: break-all;

}



.cm-panel-field {font-weight: bold;}



/*----Front End Color Switcher----*/



.cm-color-switcher {

    position: fixed; 

    left: 2%; 

    bottom: 5%;

    width: 300px;

    padding: 35px 15px 15px 15px;

}



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

    .cm-color-switcher {display: none;}

}



.cm-color-switch-title {

    margin-top: 10px;

}

 

input#cm-panel-accent,

select#cm-panel-theme {

    width: 100%;

    -webkit-appearance: none;

    -moz-appearance: none;

    border: 1px solid #e1e1e1;

    background-color: #fafafa;

    padding: 8px;

    margin-top: 10px;

    color: #646464;

    font-family: inherit;

    border-radius: 4px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -ms-border-radius: 4px;

}



button#cm-color-switch {

    margin-top: 10px;

    text-align: center;

    background-color: rgb(150,150,150);

}



#cm-theme-box-toggle {

    position: absolute;

    top: 0px;

    right: 0px;

    background-color: red;

    text-align: center !important;

    width: 30px;

    height: 30px;

    color: white !important;

    vertical-align: middle;

    font-family: sans-serif;

    font-weight: bold;

}



#cm-theme-box-toggle:hover {

    background-color: rgb(240, 0, 0);

}



.cm-color-switcher-note {

    font-size: 12px;

}

.cm-floating-page-content .cmrow .cminput .g-recaptcha iframe {    float: left;
   height: 78px;}

#cm_otp_login #cm_otp_enter_password #cm_rememberme_cb div{
    width: 50%;
    font-size: 12px;
}

#cm_otp_login #cm_otp_enter_password #cm_rememberme_cb{
    margin-bottom: 10px;
}