/*###############################################################################*/

/*# Structure of Modal                                                                                                                           #*/

/*###############################################################################*/

• <div class="{WrapperClass}">
  • <div class="confirmation_message_custom ">
    •  <div class="confirmation_message_content"> 
      •  <header class="confirmation_message_header"> 
        •  <h2 class="confirmation_message_title">Are you sure?</h2>
      •  </header> 
    •  <div class="confirmation_message_body">
      •  <div class="confirmation_message1">If you proceed...</div>
      •  <div class="confirmation_message2">Are you sure you ...</div> 
    •  </div>
    •  <footer class="confirmation_message_footer"> 
      •  <div class="btn confirmation_message_btn-cancel ">Cancel</div>
      •  <div class="btn confirmation_message_btn-confirm ">Confirm</div> 
    •  </footer>
    •  </div>
  • </div>
  • <div class="confirmation_message_overlay"></div>
• </div>

/*###############################################################################*/

/*# Default Class      

 .confirmation_style01

 .confirmation_style_question_sidebar

 .confirmation_style_question_sidebar_erase

 .confirmation_style_question_sidebar_success

.confirmation_style_question_sidebar

.confirmation_style_question_sidebar_erase

.confirmation_style_question_sidebar_success                                                                                    #*/

/*###############################################################################*/

.confirmation_message_custom {

    position: fixed;

    z-index: 1000;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    --border-radius-dialog: 10px;

}

.confirmation_message_content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    min-width: 400px;

    max-width: 500px;

    padding: var(--space-m);

    overflow: hidden;

    background: #fff;

    border-radius: var(--border-radius-soft);

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

}

.confirmation_message_header {

    position: relative;

    display: flex;

    justify-content: space-between;

}

.confirmation_message_title {

    margin: 0;

    flex: 1;

    font-size: var(--font-size-h4);

    text-align: center;

}

.confirmation_message_body {

}

.confirmation_message1,

.confirmation_message2,

.confirmation_message3{

    margin: var(--space-s);

    font-size: var(--font-size-base);

    text-align: center;

}

.confirmation_message_footer {

    margin-top: var(--space-m);

    text-align: center;

    display: flex;

    justify-content: space-evenly;

}

.confirmation_message_footer .btn {

    min-width: 150px;

    max-width: 150px;

}

.confirmation_message_overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.2);

    /* Add the blur effect */

    backdrop-filter: blur(1px);

    -webkit-backdrop-filter: blur(1px);

}

/*###############################################################################*/

/*# Style 01                                                                      #*/

/*###############################################################################*/

.confirmation_style01 .confirmation_message_content {

    padding: 0;

    overflow: hidden;

    border-radius: var(--border-radius-dialog);

}

.confirmation_style01 .confirmation_message_title {

    padding : var(--space-m);

    color: var(--color-neutral-8);

}

.confirmation_style01 .confirmation_message_footer {

    align-content: stretch;

}

.confirmation_style01 .confirmation_message_footer .btn {

    margin: 0;

    border: 0;

    border-radius: 0;

    min-width: unset;

    max-width: unset;

    flex-grow: 1;

}

/*###############################################################################*/

/*# Styles Side Bar                                                              #*/

/*###############################################################################*/

.confirmation_style_question_sidebar .confirmation_message_content,

.confirmation_style_question_sidebar_erase .confirmation_message_content,

.confirmation_style_question_sidebar_success .confirmation_message_content {

    padding: 0;

    border-radius: var(--border-radius-dialog);

    padding-left: 120px;

}

.confirmation_style_question_sidebar .confirmation_message_title,

.confirmation_style_question_sidebar_erase .confirmation_message_title,

.confirmation_style_question_sidebar_success .confirmation_message_title {

    padding : var(--space-s);

    color: var(--color-neutral-8);

}

.confirmation_style_question_sidebar .confirmation_message_footer,

.confirmation_style_question_sidebar_erase .confirmation_message_footer,

.confirmation_style_question_sidebar_success .confirmation_message_footer {

    align-content: stretch;

}

.confirmation_style_question_sidebar .confirmation_message_footer .btn,

.confirmation_style_question_sidebar_erase .confirmation_message_footer .btn,

.confirmation_style_question_sidebar_success .confirmation_message_footer .btn {

    margin: 0;

    border: 0;

    border-radius: 0;

    min-width: unset;

    max-width: unset;

    flex-grow: 1;

}

.confirmation_style_question_sidebar .confirmation_message_overlay,

.confirmation_style_question_sidebar_erase .confirmation_message_overlay,

.confirmation_style_question_sidebar_success .confirmation_message_overlay {

    background: rgba(0, 0, 0, 0.1);

}

.confirmation_style_question_sidebar .confirmation_message_content:before,

.confirmation_style_question_sidebar_erase .confirmation_message_content:before,

.confirmation_style_question_sidebar_success .confirmation_message_content:before {

    font: normal normal normal 14px/1 FontAwesome;

    font-size: 100px;

    color: #fafafa;

    text-align : center;

    padding-top: var(--space-s);

    position: absolute;

    top: 0;

    left: 0;

    height: calc(100% - var(--space-s));

    width: 120px;

 }

.confirmation_style_question_sidebar .confirmation_message_overlay:before,

.confirmation_style_question_sidebar_erase .confirmation_message_overlay:before,

.confirmation_style_question_sidebar_success .confirmation_message_overlay:before {

    font: normal normal normal 14px/1 FontAwesome;

    position: absolute;

    font-size: 160vw;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    color: var(--color-neutral-8);

    opacity: 0.04;

}

/*###############################################################################*/

/*# Style Success Side Bar                                                      #*/

/*###############################################################################*/

.confirmation_style_question_sidebar_success .confirmation_message_content:before {

    content: '\f058';

    background-color: var(--color-success);

 }

.confirmation_style_question_sidebar_success .confirmation_message_overlay:before {

    content:'\f058';   

}

/*###############################################################################*/

/*# Style Question Side Bar                                                     #*/

/*###############################################################################*/

.confirmation_style_question_sidebar .confirmation_message_content:before {

    content: '\f059';

    background-color: var(--color-info);

}

.confirmation_style_question_sidebar .confirmation_message_overlay:before {

    content:'\f059';

}

/*###############################################################################*/

/*# Style Question Side Bar Erase                                               #*/

/*###############################################################################*/

.confirmation_style_question_sidebar_erase .confirmation_message_content:before {

    content: '\f1f8';

    background-color: var(--color-error);

 }

.confirmation_style_question_sidebar_erase .confirmation_message_overlay:before {

    content:'\f059';

}

/*###############################################################################*/

/*# Phone Style                                                                                                                                      #*/

/*###############################################################################*/

.phone .confirmation_message_content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    min-width: 90%;

    max-width: 90%;

}

.phone .confirmation_style_question_sidebar .confirmation_message_content,

.phone .confirmation_style_question_sidebar_success .confirmation_message_content,

.phone .confirmation_style_question_sidebar_erase .confirmation_message_content{

    padding: unset;

    padding-top: 96px;

}

.phone .confirmation_style_question_sidebar .confirmation_message_content:before,

.phone .confirmation_style_question_sidebar_success .confirmation_message_content:before,

.phone .confirmation_style_question_sidebar_erase .confirmation_message_content:before {

    font-size: 76px;

    text-align: center;

    top: 0;

    left: 0;

    height: 84px;

    width: calc(100%);

    padding-top: var(--space-s);

 }

.phone .confirmation_style_question_sidebar .confirmation_message_overlay:before,

.phone .confirmation_style_question_sidebar_success .confirmation_message_overlay:before,

.phone .confirmation_style_question_sidebar_erase .confirmation_message_overlay:before {

    font-size: 200vh;

}

/*###############################################################################*/

/*# Custom Demo Styles                                                                                                                     #*/

/*###############################################################################*/

/*###############################################################################*/

/*# Custom Style 01                                                                      #*/

/*###############################################################################*/

.confirmation_c_style01 .confirmation_message_content {

    padding: 0;

    overflow: hidden;

    border-radius: var(--border-radius-dialog);

}

.confirmation_c_style01 .confirmation_message_title {

    padding : var(--space-m);

    color: var(--color-neutral-8);

}

.confirmation_c_style01 .confirmation_message_footer {

    align-content: stretch;

}

.confirmation_c_style01 .confirmation_message_footer .btn {

    margin: 0;

    border: 0;

    border-radius: 0;

    min-width: unset;

    max-width: unset;

    flex-grow: 1;

}

/*###############################################################################*/

/*# Styles 01                                                                   #*/

/*###############################################################################*/

.confirmation_style_question_style01 .confirmation_message_content,

.confirmation_style_question_style01_erase .confirmation_message_content,

.confirmation_style_question_style01_success .confirmation_message_content {

    padding: 0;

    border-radius: var(--border-radius-dialog);

    padding-bottom: var(--space-m);

}

.confirmation_style_question_style01 .confirmation_message_title,

.confirmation_style_question_style01_erase .confirmation_message_title,

.confirmation_style_question_style01_success .confirmation_message_title {

    padding : var(--space-m);

    color: var(--color-neutral-0);

}

.confirmation_style_question_style01 .confirmation_message_body div,

.confirmation_style_question_style01_erase .confirmation_message_body div,

.confirmation_style_question_style01_success .confirmation_message_body div {

    padding : var(--space-s);

}

.confirmation_style_question_style01 .confirmation_message_title {

    background:linear-gradient(#79bbff, #378de5);

}

.confirmation_style_question_style01_erase .confirmation_message_title {

    background:linear-gradient(#f24537, #c62d1f);

}

.confirmation_style_question_style01_success .confirmation_message_title {

    background:linear-gradient(#89c403, #77a809);

}

.confirmation_style_question_style01 .confirmation_message_overlay,

.confirmation_style_question_style01_erase .confirmation_message_overlay,

.confirmation_style_question_style01_success .confirmation_message_overlay {

    background: rgba(0, 0, 0, 0.5);

}

.confirmation_style_question_style01 .btn,

.confirmation_style_question_style01_erase .btn,

.confirmation_style_question_style01_success .btn{

  border-width: 1px;

  border-radius: 10px;

  width:140px;

  height:50px;

  color:#666666;

  border-color:#dcdcdc;

  box-shadow:inset 0px 1px 0px 0px #ffffff;

  text-shadow:inset 0px 1px 0px #ffffff;

  background:linear-gradient(#ffffff, #f6f6f6);

}

.confirmation_style_question_style01 .btn_style01:hover,

.confirmation_style_question_style01_erase .btn_style01:hover,

.confirmation_style_question_style01_success .btn_style01:hover {

  background: linear-gradient(#e9e9e9, #f9f9f9);

}

.confirmation_style_question_style01 .btn_confirm_style01{

   color: var(--color-neutral-0);

   border-color:#84bbf3;

   background:linear-gradient(#79bbff, #378de5);

}

.confirmation_style_question_style01 .btn_confirm_style01:hover{

   background: linear-gradient(#378de5, #79bbff);

}

.confirmation_style_question_style01_erase .btn_confirm_style01_erase{

    color: var(--color-neutral-0);

    border-color:#d02718;

    background:linear-gradient(#f24537, #c62d1f);

}

.confirmation_style_question_style01_erase .btn_confirm_style01_erase:hover{

   background: linear-gradient(#c62d1f, #f24537);

}

.confirmation_style_question_style01_success .btn_confirm_style01_success{

    color: var(--color-neutral-0);

    border-color:#74b807;

    background:linear-gradient(#89c403, #77a809);

}

.confirmation_style_question_style01_success .btn_confirm_style01_success:hover{

   background: linear-gradient(#77a809, #89c403);

}

/*###############################################################################*/

/*# Phone Style 01                                                              #*/

/*###############################################################################*/

.phone .confirmation_style_question_style01 .confirmation_message_content,

.phone .confirmation_style_question_style01_success .confirmation_message_content,

.phone .confirmation_style_question_style01_erase .confirmation_message_content{

    position: absolute;

    top: var(--space-xxl);

    max-width: 100%;

    transform: translate(-50%,0%);

}

.phone .confirmation_style_question_style01 .confirmation_message_overlay,

.phone .confirmation_style_question_style01_erase .confirmation_message_overlay,

.phone .confirmation_style_question_style01_success .confirmation_message_overlay {

    background: rgba(0, 0, 0,0.5);

}

/*###############################################################################*/

/*# Styles 02                                                                   #*/

/*###############################################################################*/

.confirmation_style_question_style02 .confirmation_message_content,

.confirmation_style_question_style02_erase .confirmation_message_content,

.confirmation_style_question_style02_success .confirmation_message_content {

    padding: 0;

    border-radius: var(--border-radius-dialog);

}

.confirmation_style_question_style02 .confirmation_message_title,

.confirmation_style_question_style02_erase .confirmation_message_title,

.confirmation_style_question_style02_success .confirmation_message_title {

    padding : var(--space-m);

    color: var(--color-neutral-0);

}

.confirmation_style_question_style02 .confirmation_message_body div,

.confirmation_style_question_style02_erase .confirmation_message_body div,

.confirmation_style_question_style02_success .confirmation_message_body div {

    padding : var(--space-s);

}

.confirmation_style_question_style02 .confirmation_message_footer,

.confirmation_style_question_style02_erase .confirmation_message_footer,

.confirmation_style_question_style02_success .confirmation_message_footer{

    align-content: stretch;

}

.confirmation_style_question_style02 .confirmation_message_footer .btn,

.confirmation_style_question_style02_erase .confirmation_message_footer .btn,

.confirmation_style_question_style02_success .confirmation_message_footer .btn{

    margin: 0;

    border: 0;

    border-radius: 0;

    min-width: unset;

    max-width: unset;

    flex-grow: 1;

}

.confirmation_style_question_style02 .confirmation_message_title {

    background:linear-gradient(#79bbff, #378de5);

}

.confirmation_style_question_style02_erase .confirmation_message_title {

    background:linear-gradient(#f24537, #c62d1f);

}

.confirmation_style_question_style02_success .confirmation_message_title {

    background:linear-gradient(#89c403, #77a809);

}

.confirmation_style_question_style02 .confirmation_message_overlay,

.confirmation_style_question_style02_erase .confirmation_message_overlay,

.confirmation_style_question_style02_success .confirmation_message_overlay {

    background: rgba(0, 0, 0, 0.5);

}

.confirmation_style_question_style02 .btn,

.confirmation_style_question_style02_erase .btn,

.confirmation_style_question_style02_success .btn{

  color:#666666;

  border-color:#dcdcdc;

  box-shadow:inset 0px 1px 0px 0px #ffffff;

  text-shadow:inset 0px 1px 0px #ffffff;

  background:linear-gradient(#ffffff, #f6f6f6);

}

.confirmation_style_question_style02 .btn_style02:hover,

.confirmation_style_question_style02_erase .btn_style02:hover,

.confirmation_style_question_style02_success .btn_style02:hover {

  background: linear-gradient(#e9e9e9, #f9f9f9);

}

.confirmation_style_question_style02 .btn_confirm_style02{

   color: var(--color-neutral-0);

   border-color:#84bbf3;

   background:linear-gradient(#79bbff, #378de5);

}

.confirmation_style_question_style02 .btn_confirm_style02:hover{

   background: linear-gradient(#378de5, #79bbff);

}

.confirmation_style_question_style02_erase .btn_confirm_style02_erase{

    color: var(--color-neutral-0);

    border-color:#d02718;

    background:linear-gradient(#f24537, #c62d1f);

}

.confirmation_style_question_style02_erase .btn_confirm_style02_erase:hover{

   background: linear-gradient(#c62d1f, #f24537);

}

.confirmation_style_question_style02_success .btn_confirm_style02_success{

    color: var(--color-neutral-0);

    border-color:#74b807;

    background:linear-gradient(#89c403, #77a809);

}

.confirmation_style_question_style02_success .btn_confirm_style02_success:hover{

   background: linear-gradient(#77a809, #89c403);

}

/*###############################################################################*/

/*# Phone Style 02                                                              #*/

/*###############################################################################*/

.phone .confirmation_style_question_style02 .confirmation_message_content,

.phone .confirmation_style_question_style02_success .confirmation_message_content,

.phone .confirmation_style_question_style02_erase .confirmation_message_content{

    position: absolute;

    top: var(--space-xxl);

    max-width: 100%;

    transform: translate(-50%,0%);

}

.phone .confirmation_style_question_style02 .confirmation_message_overlay,

.phone .confirmation_style_question_style02_erase .confirmation_message_overlay,

.phone .confirmation_style_question_style02_success .confirmation_message_overlay {

    background: rgba(0, 0, 0,0.5);

}

.confirmation_style_question_style02 .confirmation_message_content{

   animation: pulse 800ms infinite;

   --pulse : 0 0 0 0 hsl(204, 100%, 50%);

   --pulse-70 : 0 0 10px 20px rgba(255,255,255, 0.1);

   --pulse-100 : 0 0 10px 35px rgba(255,255,255, 0);

}

.confirmation_style_question_style02_erase .confirmation_message_content{

   animation: pulse 800ms infinite;

   --pulse : 0 0 0 0 hsl(4, 88%, 58%);

   --pulse-70 : 0 0 10px 20px rgba(255,255,255, 0.1);

   --pulse-100 : 0 0 10px 35px rgba(255,255,255, 0);

}

.confirmation_style_question_style02_success .confirmation_message_content{

   animation: pulse 800ms infinite;

   --pulse : 0 0 0 0 hsl(78, 97%, 39%);

   --pulse-70 : 0 0 10px 20px rgba(255,255,255, 0.1);

   --pulse-100 : 0 0 10px 35px rgba(255,255,255, 0);

}

@-webkit-keyframes pulse {

  0% {

    -webkit-box-shadow: var(--pulse);

  }

  70% {

    -webkit-box-shadow: var(--pulse-70);

  }

  100% {

     -webkit-box-shadow: var(--pulse-100);

  }

}

@keyframes pulse {

  0% {

    -moz-box-shadow: var(--pulse);

    box-shadow: var(--pulse);

  }

  70% {

      -moz-box-shadow: var(--pulse-70);

      box-shadow: var(--pulse-70);

  }

  100% {

      -moz-box-shadow: var(--pulse-100);

      box-shadow: var(--pulse-100);

  }

}

/*###############################################################################*/

/*# Styles Side Bar 02                                                          #*/

/*###############################################################################*/

.confirmation_style_question_sidebar02 .confirmation_message_content,

.confirmation_style_question_sidebar02_erase .confirmation_message_content,

.confirmation_style_question_sidebar02_success .confirmation_message_content {

    padding: 0;

    border-radius: var(--border-radius-dialog);

}

.confirmation_style_question_sidebar02 .confirmation_message_title,

.confirmation_style_question_sidebar02_erase .confirmation_message_title,

.confirmation_style_question_sidebar02_success .confirmation_message_title {

    padding : var(--space-s);

    color: var(--color-neutral-8);

    padding-top : 28px;

    padding-left : 120px;

    text-align: left;

}

.confirmation_style_question_sidebar02 .confirmation_message_body div,

.confirmation_style_question_sidebar02_erase .confirmation_message_body div,

.confirmation_style_question_sidebar02_success .confirmation_message_body div {

    text-align: left;

    padding : var(--space-s);

    padding-left : 120px;

    margin: 0;

}

.confirmation_style_question_sidebar02 .confirmation_message_footer,

.confirmation_style_question_sidebar02_erase .confirmation_message_footer,

.confirmation_style_question_sidebar02_success .confirmation_message_footer {

    align-content: stretch;

}

.confirmation_style_question_sidebar02 .confirmation_message_footer .btn,

.confirmation_style_question_sidebar02_erase .confirmation_message_footer .btn,

.confirmation_style_question_sidebar02_success .confirmation_message_footer .btn {

    margin: 0;

    border: 0;

    border-radius: 0;

    min-width: unset;

    max-width: unset;

    flex-grow: 1;

}

.confirmation_style_question_sidebar02 .confirmation_message_overlay,

.confirmation_style_question_sidebar02_erase .confirmation_message_overlay,

.confirmation_style_question_sidebar02_success .confirmation_message_overlay {

    background: rgba(0, 0, 0, 0.6);

}

.confirmation_style_question_sidebar02 .confirmation_message_content:before,

.confirmation_style_question_sidebar02_erase .confirmation_message_content:before,

.confirmation_style_question_sidebar02_success .confirmation_message_content:before {

    position: absolute;

    top: 0;

    left: 0;

    height: 16px;

    width: 100%;

    content: '';

 }

.confirmation_style_question_sidebar02 .confirmation_message_content:after,

.confirmation_style_question_sidebar02_erase .confirmation_message_content:after,

.confirmation_style_question_sidebar02_success .confirmation_message_content:after {

    font: normal normal normal 14px/1 FontAwesome;

    font-size: 80px;

    position: absolute;

    top: 16px;

    left: 0;

    width: 120px;

    height: calc(100% - 56px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

}

.confirmation_style_question_sidebar02 .confirmation_message_overlay:before,

.confirmation_style_question_sidebar02_erase .confirmation_message_overlay:before,

.confirmation_style_question_sidebar02_success .confirmation_message_overlay:before {

    font: normal normal normal 14px/1 FontAwesome;

    position: absolute;

    font-size: 160vw;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    color: var(--color-neutral-8);

    opacity: 0.04;

}

/*###############################################################################*/

/*# Style Success Side Bar  02                                                  #*/

/*###############################################################################*/

.confirmation_style_question_sidebar02_success .confirmation_message_content:before {

    background-color: var(--color-success);

 }

.confirmation_style_question_sidebar02_success .confirmation_message_content:after {

    content: '\f058';

    color: var(--color-success);

 }

.confirmation_style_question_sidebar02_success .confirmation_message_overlay:before {

    content:'\f058';   

}

/*###############################################################################*/

/*# Style Question Side Bar 02                                                  #*/

/*###############################################################################*/

.confirmation_style_question_sidebar02 .confirmation_message_content:before {

    background-color: var(--color-info);

 }

.confirmation_style_question_sidebar02 .confirmation_message_content:after {

    content: '\f059';

    color: var(--color-info);

}

.confirmation_style_question_sidebar02 .confirmation_message_overlay:before {

    content:'\f059';

}

/*###############################################################################*/

/*# Style Question Side Bar Erase 02                                            #*/

/*###############################################################################*/

.confirmation_style_question_sidebar02_erase .confirmation_message_content:before {

    background-color: var(--color-error);

 }

.confirmation_style_question_sidebar02_erase .confirmation_message_content:after {

    content: '\f059';

    color: var(--color-error);

 }

.confirmation_style_question_sidebar02_erase .confirmation_message_overlay:before {

    content:'\f059';

}

/*###############################################################################*/

/*# Phone Style Side Bar 02                                                    #*/

/*###############################################################################*/

.phone .confirmation_style_question_sidebar02 .confirmation_message_content,

.phone .confirmation_style_question_sidebar02_erase .confirmation_message_content,

.phone .confirmation_style_question_sidebar02_success .confirmation_message_content {

    position: absolute;

    top: 12% !important;

    left: 50%;

    transform: translate(-50%,-50%);

    min-width: 90%;

    max-width: 90%;

}