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

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


/* Dialog window. */
.fwdsc-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. */
.fwdsc-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;
}

.fwdsc-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;
}

.fwdsc-close-button:hover{
   color: #E01F1C !important;
}

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

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

.fwdsc-close-button:hover .fwdsc-close-button-icon svg path{
   fill: #E01F1C !important;
}


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

.fwdsc-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;
}

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

.fwdsc-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;
}

.fwdsc-dialog-content .input.number{
   max-width: 120px !important;
}

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

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

.fwdsc-dialog-content .select,
.fwdsc-dialog-content .select option{
   width: 100% !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;
    font-weight: 700 !important;
    line-height: 26px !important;
    padding: 8px 20px !important;
    color: #333 !important;
    width: auto !important;
    padding: 8px 40px 8px 20px !important;
    font-weight: normal !important;
     appearance: none !important;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
}

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


/* Check box. */
.fwdsc-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;
}

.fwdsc-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;
}

.fwdsc-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;
}

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

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

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

.fwdsc-dialog-content .col2 p + div{
   margin-top: 6px !important;
}


/* Footer bar. */
.fwdsc-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;
}

.fwdsc-dialog-button{
   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;
}

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

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

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

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

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

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

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