/**
 * Dialog.
 *
 * @package fwdpp
 * @since fwdpp 1.0
 */

 /* Overlay background. */
.fwdpp-dialog-background{
   position: fixed !important;
   background: rgba(0, 0, 0, .6) !important;
   width: 100vw !important;
   height: 100vh !important;
}


/* Dialog window. */
.fwdpp-dialog-main{
   position: absolute !important;
   overflow: visible !important;
   width: calc(100% - 40px) !important;
   max-height: calc(100% - 40px) !important;
   border-radius: 16px !important;
   box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.19) !important;
   background: #FFFFFF !important;
}


/* Titile bar. */
.fwdpp-title-bar{
   position: relative !important;
   padding: 15px !important;
   text-align: center !important;
   font-family: Roboto !important;
   font-size: 20px !important;
   font-style: normal !important;
   font-weight: 500 !important;
   line-height: normal !important;
   border-top-left-radius: 16px !important;
   border-top-right-radius: 16px !important;
   background: #F8F8F8 !important;
   color: #333333 !important;
}

.fwdpp-close-button{
   position: absolute !important;
   right: 9px !important;
   top: 12px !important;
   width: 30px !important;
   height: 30px !important;
   cursor: pointer !important;
   border-radius: 4px !important;
   color: #7c8292 !important;
   transition: all .25s ease-out !important;
}

.fwdpp-close-button:hover{
   color: #169A24 !important;
}

.fwdpp-close-button-icon{
   position: relative !important;
   left: 1px !important;
   top: 3px !important;
}

.fwdpp-close-button-icon svg path{
   transition: all .25s ease-out !important;
   fill: #7c8292 !important;
}

.fwdpp-close-button:hover .fwdpp-close-button-icon svg path{
   fill: #169A24 !important;
}


/* Dialog content. */
.fwdpp-dialog-content-holder{
   overflow: auto !important;
}

.fwdpp-dialog-content{
   box-sizing: border-box !important;
   overflow: auto !important;
   font-family: Roboto !important;
   font-size: 14px !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 24px !important;
   color: #333 !important;
   padding: 0 20px !important;
}

.fwdpp-dialog-content p{
   font-size: 14px !important;
   line-height: 24px !important;
   margin: 17px 0 !important;
}

.fwdpp-dialog-content .input{
   padding: 7px 12px !important;
   gap: 10px !important;
   font-family: Roboto !important;
   font-size: 14px !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 24px !important;
   border-radius: 8px !important;
   border: 1px solid #B7B7B7;
   background: #FFF;
   color: #333;
}

.fwdpp-dialog-content .input.number,
.fwdpp-dialog-content .input.small{
   width: 100% !important;
   max-width: 150px !important;
}

.fwdpp-dialog-content label{
   margin-top: 10px;
}

.fwdpp-dialog-content .input + .fwdpp-dialog-add-from-library{
   margin-top: 8px !important;
}

.fwdpp-dialog-content .select,
.fwdpp-dialog-content .select option{
   width: auto !important;
   font-weight: normal !important;
   max-width: none !important;
   border-radius: 8px !important;
   border: 1px solid #B7B7B7 !important;
   font-family: Roboto !important;
   font-size: 15px !important;
   font-style: normal !important;
   line-height: 26px !important;
   padding: 8px 40px 8px 20px !important;
   color: #333 !important;
}

.fwdpp-dialog-content option{
    font-weight: normal !important;
}


/* Check box. */
.fwdpp-dialog-content .checkbox{
   position: relative !important;
   width: 0 !important;
   min-height: 0 !important;
   max-width: 0 !important;
   min-width: 0 !important;
   height: 0 !important;
   top: -3px !important;
   left: 0 !important;
   box-shadow: none !important;
   outline: none !important;
   border: none !important;
   margin: 0 !important;
}

.fwdpp-dialog-content .checkbox::before{
   content: ""  !important;
   width: 46px !important;
   height: 24px !important;
   background-color: #9c9c9c  !important;
   border-radius: 12px !important;
   position: absolute  !important;
   top: 0  !important;
   left: 0  !important;
   margin: 0 !important;
   transition: all 0.25s ease-out !important;
   transform: translateX(0) !important;
}

.fwdpp-dialog-content .checkbox::after{
   content: ""  !important;
   width: 18px !important;
   height: 18px !important;
   background-color: #FFFFFF  !important;
   border-radius: 100% !important;
   position: absolute  !important;
   top: 3px !important;
   left: 4px !important;
   margin: 0 !important;
   transition: all 0.25s ease-out !important;
   transform: translateX(0) !important;
}

.fwdpp-dialog-content .checkbox:checked::before {
   /* Add styles for the ON state here */
   background-color: #f1ac00 !important;
}

.fwdpp-dialog-content .checkbox:checked::after {
   /* Add styles for the ON state here */
   transform: translateX(20px) !important;
}

.fwdpp-dialog-content .col2 .checkbox + p{
   margin-top: 33px !important;
}


/* Footer bar. */
.fwdpp-dialog-footer-bar{
   position: relative !important;
   text-align: right;
   bottom: 0 !important;
   border-bottom-left-radius: 16px !important;
   border-bottom-right-radius: 16px !important;
   padding: 10px 15px 16px !important;
   background: #FFF !important;
}

.fwdpp-dialog-button,
.fwdpp-planet-shortcode{
   font-family: Roboto;
   user-select: none !important;
   font-size: 16px !important;
   font-weight: 500;
   line-height: 1.5 !important;
   box-sizing: border-box !important;
   display: inline-block;
   margin: 0 !important;
   border-radius: 8px !important;
   text-align: center !important;
   text-decoration: none !important;
   border: 1px solid #9C9C9C !important;
   cursor: pointer !important;
   padding: 7px 22px 7px !important;
   background: #F8F8F8 !important;
   color: #9C9C9C !important;
   transition: all .25s ease-out !important;
}

.fwdpp-planet-shortcode{
   width: 100% !important;
   text-align: center !important;
   border-radius: none !important;
   max-width: none !important;
   margin: -2px 0 20px 0 !important;
   border: 1px solid #9C9C9C !important;
   white-space: nowrap !important;
   cursor: pointer !important;
   padding: 7px 22px 7px !important;
   background: #F8F8F8 !important;
   color: #9C9C9C !important;
   transition: all .25s ease-out !important;
}

.fwdpp-planet-shortcode svg{
   float: right !important;
   position: relative !important;
   left: 9px !important;
   top: 3px !important;
}

.fwdpp-planet-shortcode .fwdpp-text{
   font-family: Roboto;
   user-select: none !important;
   font-size: 16px !important;
   font-weight: 500;
   display: inline-block !important;
   vertical-align: middle !important;
   width: 100%;
   margin: 0 20px 0 0 !important;
   max-width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
}

.fwdpp-planet-shortcode:hover{
   background: #169A24 !important;
   border-color: #169A24 !important;
   color: #FFF !important;
   
}

.fwdpp-planet-shortcode svg path{
   fill: rgb(156, 156, 156) !important;
   transition: all .25s ease-out !important;
}

.fwdpp-planet-shortcode:hover svg path{
   fill: #FFF !important;
}

.fwdpp-dialog-button.cancel{
   background: #f1ac00 !important;
   border-color: #f1ac00 !important;
   color: #FFF !important;
}

.fwdpp-dialog-button + .fwdpp-dialog-button{
   margin-left: 15px !important;
}

.fwdpp-dialog-button.cancel:hover{
   background: #169A24 !important;
   border-color: #169A24 !important;
}

.fwdpp-dialog-button:hover{
   background: #169A24 !important;
   border-color: #169A24 !important;
   color: #FFF !important;
}

.fwdpp-separator{
   display: inline-block !important;
   margin: 37px 0 10px !important;
   width: 100% !important;
   height: 1px !important;
   background-color: #B7B7B7 !important;
}

.fwdpp-dialog-button:after{
   content: "";
   display: table;
   clear: both;
}

.fwdpp-dialog-button.need-update{
   background: #36B043 !important;
   color: #FFF !important;
}

.fwdpp-dialog-button.need-update:hover{
   background: #169A24 !important;
   color: #FFF !important;
}