/*
    Overlay CSS design
    @version 1.0
    @author Toures Tiu <toures.tiu@comma.com.my>
    @created at 21/8/2018
    @updated at 12/7/2019 by Syu Qian
      - Duplicated modal styling into class .custom-modal
*/

#downloadCenterModal .modal-dialog,
.custom-modal .modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media(max-width: 768px) {
  #downloadCenterModal .modal-dialog,
  .custom-modal .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

@media (min-width: 576px) {
    #downloadCenterModal .modal-dialog,
    .custom-modal .modal-dialog {
        max-width: 600px;
    }
}


#downloadCenterModal .close,
.custom-modal .close {
    color: #ec008c;
    font-size: 14px;
    /* font-weight: 400; */
    text-shadow: none;
    opacity: 1;
    margin-bottom: 30px;
    transform: translateZ(0);
}

#downloadCenterModal .modal-body,
.custom-modal .modal-body {
    padding: 30px;
    background-color: #312f45;
}

#downloadCenterModal form {
    text-align: center;
}

#downloadCenterModal .form-title,
#downloadCenterModal .form-sub-title {
    color: #fff;
}

#downloadCenterModal .form-title,
#downloadCenterModal .form-user-email,
#downloadCenterModal .form-white-title {
    margin-bottom: 20px;
}

#downloadCenterModal .form-sub-title
#downloadCenterModal .form-register-warning {
    margin-bottom: 28px;
}

#downloadCenterModal .form-user-email input {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 0;
}

#downloadCenterModal .form-user-email input::-webkit-input-placeholder {
    text-align: center;
}

#downloadCenterModal .form-user-email input:-moz-placeholder { /* Firefox 18- */
    text-align: center;
}

#downloadCenterModal .form-user-email input::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;
}

#downloadCenterModal .form-user-email input:-ms-input-placeholder {
    text-align: center;
}

#downloadCenterModal .form-download-now {
    padding: 12px;
    width: 100%;
    background-color: #fff;
    color: #ec008c;
    font-weight: 700;
    border: none;
    box-shadow: 2px 2px 6px #000;
    margin-bottom: 18px;
}

#downloadCenterModal .form-register-warning {
    color: #d8b37d;
    font-size: 12px;
}

#downloadCenterModal .form-white {
    position: relative;
    background-color: #f0f0f0;
    padding: 30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -30px;
}

#downloadCenterModal .form-white-title,
#downloadCenterModal .form-white-subtitle {
    color: #000;
}

#downloadCenterModal .form-white .form-user-email input {
    border: 1px solid #e1e1e1;
}

#downloadCenterModal .form-download-now-reverse {
    background-color: #ec008c;
    color: #fff;
}

#downloadCenterModal .form-white-subtitle {
    margin-bottom: 30px;
}

#downloadCenterModal .form-white:before {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -12px;
    border-bottom: solid 12px #f0f0f0;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
}

.form-download-now-disabled {
    color: #000;
    background-color: rgb(37, 33, 33);
    padding: 12px;
    width: 100%;
    font-weight: 700;
    border: none;
    box-shadow: 2px 2px 6px #000;
    margin-bottom: 18px;
}

#changeEmailModal .modal-dialog,
.custom-modal .modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media(max-width: 768px) {
  #changeEmailModal .modal-dialog,
  .custom-modal .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

@media (min-width: 576px) {
    #changeEmailModal .modal-dialog,
    .custom-modal .modal-dialog {
        max-width: 600px;
    }
}


#changeEmailModal .close,
.custom-modal .close {
    color: #ec008c;
    font-size: 14px;
    /* font-weight: 400; */
    text-shadow: none;
    opacity: 1;
    margin-bottom: 30px;
    transform: translateZ(0);
}

#changeEmailModal .modal-body,
.custom-modal .modal-body {
    padding: 30px;
    background-color: #312f45;
}

#changeEmailModal form {
    text-align: center;
}

#changeEmailModal .form-title,
#changeEmailModal .form-sub-title {
    color: #fff;
}

#changeEmailModal .form-title,
#changeEmailModal .form-user-email,
#changeEmailModal .form-white-title {
    margin-bottom: 20px;
}

#changeEmailModal .form-sub-title
#changeEmailModal .form-register-warning {
    margin-bottom: 28px;
}

#changeEmailModal .form-user-email input {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 0;
}

#changeEmailModal .form-user-email input::-webkit-input-placeholder {
    text-align: center;
}

#changeEmailModal .form-user-email input:-moz-placeholder { /* Firefox 18- */
    text-align: center;
}

#changeEmailModal .form-user-email input::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;
}

#changeEmailModal .form-user-email input:-ms-input-placeholder {
    text-align: center;
}

#changeEmailModal .form-download-now {
    padding: 12px;
    width: 100%;
    background-color: #fff;
    color: #ec008c;
    font-weight: 700;
    border: none;
    box-shadow: 2px 2px 6px #000;
    margin-bottom: 18px;
}

#changeEmailModal .form-register-warning {
    color: #d8b37d;
    font-size: 12px;
}

#changeEmailModal .form-white {
    position: relative;
    background-color: #f0f0f0;
    padding: 30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -30px;
}

#changeEmailModal .form-white-title,
#changeEmailModal .form-white-subtitle {
    color: #000;
}

#changeEmailModal .form-white .form-user-email input {
    border: 1px solid #e1e1e1;
}

#changeEmailModal .form-download-now-reverse {
    background-color: #ec008c;
    color: #fff;
}

#changeEmailModal .form-white-subtitle {
    margin-bottom: 30px;
}

#changeEmailModal .form-white:before {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -12px;
    border-bottom: solid 12px #f0f0f0;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
}