/* This will overwrite some style in modal only */

/* display progress modal always on top*/
#cc-ws-modal-progress {
    z-index: 9999;
}
.modal-content {
    border-radius: 0;
}
.modal-header{
    padding: 0;
    margin: 40px 49px 0;
    border-radius: 0;
    border-bottom: 1px solid #DDDDDD;
}
.modal-header .close{
    padding: 0;
    margin: -31px -37px -1rem auto;
    font-size: 2.6rem;
    font-weight: 400;
    color: #27348B;
    opacity: 1;
}
.modal-header .close:focus,
.modal-header .close:hover{
    color: #27348B;
}
.modal-body{
    padding: 0;
    margin: 15px 10px;
}
@media screen and (min-width: 768px) { 
    .modal-body{
        margin: 20px 49px;
    }
}
.modal-body .row{
    margin: 0
}
.modal-body .form-group {
    max-width: 364px;
}
.modal-body .cc-footer .form-group {
    max-width: 100%;
}
.modal-body .tmp_hack_width {
    max-width: 354px;
    margin-left: auto;
    margin-right: auto;
}
.modal-body div > .scText {
    max-width: 354px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.modal-body p{
    padding-top: 1rem;
}
.modal-body .cc-data-required::before{
    content: '';
    padding-right: 0;
}
.modal-body legend{
    color: #464646;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.33rem;
}
.modal-body .form-check{
    padding-left: 0;
}
.modal-body .custom-control-label {
    padding-left: 30px;
}
.modal-body .custom-control-label:before {
    margin-left: 25px;
}
.modal-body .invalid-feedback.offset-sm-4 {
    margin-left: 0;
}
.modal-footer {
    padding: 0;
}
.modal-footer>:not(:last-child){
    margin: 0;
}
.modal-footer>:not(:first-child){
    margin: 0;
}

/* Checkbox */
.modal-body .custom-checkbox .custom-control-input~.custom-control-label{
    margin-left: 2.1rem;
}
.modal-body .custom-checkbox .custom-control-input~.custom-control-label::before{
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #CACACA;
    background-color: #FFFFFF;
    left: -2.1rem;
    top: 0.28rem;
}
.modal-body .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background: #27348B;
    border: 2px solid #27348B;
}
.modal-body .custom-checkbox .custom-control-input:checked~.custom-control-label::after{
    left: -0.1rem;
    top: 0.4rem;
    width: 0.4rem;
    height: 0.8rem;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-image: none;
}
.modal-body .btn-group.btn-group-form{ /*This to set btn-group same width with form-group*/
    max-width: 364px; /* keep same with .modal-body .form-group*/
    margin-left: auto;
    margin-right: auto;

}

.modal-body .form-group .alert{ /* keep same width with .form-group .cc-input-container  */
	margin-right: 5px;
    margin-left: 5px;
}