/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

.c-callout{
  position:relative;
  border:1px solid #d8dcde;
  border-radius:4px;
  background-color:#fff;
  padding:20px 40px;
  line-height:1.42857;
  color:#68737d;
  font-size:14px;
}

.c-callout__title{
  display:block;
  margin:0;
  color:#2f3941;
  font-weight:600;
}

.c-callout__paragraph{
  margin:10px 0 0;
}

.c-callout.is-rtl{
  direction:rtl;
}

.c-callout__close{
  display:block;
  position:absolute;
  top:4px;
  right:4px;
  -webkit-transition:background-color .1s ease-in-out;
  transition:background-color .1s ease-in-out;
  border:none;
  border-radius:50%;
  background-color:transparent;
  cursor:pointer;
  width:28px;
  height:28px;
  overflow:hidden;
  text-decoration:none;
  font-size:0;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}

.c-callout__close:after,.c-callout__close:before{
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  -webkit-transition:opacity .25s ease-in-out;
  transition:opacity .25s ease-in-out;
  background-repeat:no-repeat;
  background-position:50%;
  background-size:12px;
  content:"";
}

.c-callout__close:before{
  opacity:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%2368737d'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout__close:after{
  opacity:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%232f3941'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout__close.is-focused:before,.c-callout__close.is-hovered:before,.c-callout__close:focus:before,.c-callout__close:hover:before{
  opacity:0;
}

.c-callout__close.is-focused:after,.c-callout__close.is-hovered:after,.c-callout__close:focus:after,.c-callout__close:hover:after{
  opacity:1;
}

.c-callout__close.is-focused,.c-callout__close:focus{
  outline:none;
  background-color:rgba(104, 115, 125, .15);
}

.c-callout.is-rtl .c-callout__close{
  right:auto;
  left:4px;
}

.c-callout--error:not(.c-callout--dialog) .c-callout__close:before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23d93f4c'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--error:not(.c-callout--dialog) .c-callout__close:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23681219'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--success:not(.c-callout--dialog) .c-callout__close:before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23228f67'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--success:not(.c-callout--dialog) .c-callout__close:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%230b3b29'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--warning:not(.c-callout--dialog) .c-callout__close:before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23ad5e18'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--warning:not(.c-callout--dialog) .c-callout__close:after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' color='%23703b15'%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M3 9l6-6m0 6L3 3'/%3E%3C/svg%3E");
}

.c-callout--error:not(.c-callout--dialog) .c-callout__close.is-focused,.c-callout--error:not(.c-callout--dialog) .c-callout__close:focus{
  background-color:rgba(204, 51, 64, .15);
}

.c-callout--success:not(.c-callout--dialog) .c-callout__close.is-focused,.c-callout--success:not(.c-callout--dialog) .c-callout__close:focus{
  background-color:rgba(3, 129, 83, .15);
}

.c-callout--warning:not(.c-callout--dialog) .c-callout__close.is-focused,.c-callout--warning:not(.c-callout--dialog) .c-callout__close:focus{
  background-color:rgba(173, 94, 24, .15);
}

.c-callout .c-callout__close.is-focused:active,.c-callout .c-callout__close:focus:active{
  background-color:transparent;
}

.c-callout--recessed{
  background-color:#f8f9f9;
}

.c-callout--info{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%2368737d'%3E%3Cg stroke='currentColor'%3E%3Ccircle cx='7.5' cy='8.5' r='7' fill='none'/%3E%3Cpath stroke-linecap='round' d='M7.5 12.5V8'/%3E%3C/g%3E%3Ccircle cx='7.5' cy='5' r='1' fill='currentColor'/%3E%3C/svg%3E");
}

.c-callout--error{
  border-color:#f5b5ba;
  background-color:#fff0f1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%23cc3340'%3E%3Cg fill='none' stroke='currentColor'%3E%3Ccircle cx='7.5' cy='8.5' r='7'/%3E%3Cpath stroke-linecap='round' d='M7.5 4.5V9'/%3E%3C/g%3E%3Ccircle cx='7.5' cy='12' r='1' fill='currentColor'/%3E%3C/svg%3E");
  color:#8c232c;
}

.c-callout--success{
  border-color:#aecfc2;
  background-color:#edf8f4;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%23038153'%3E%3Cg fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 9l2.5 2.5 5-5'/%3E%3Ccircle cx='7.5' cy='8.5' r='7'/%3E%3C/g%3E%3C/svg%3E");
  color:#186146;
}

.c-callout--warning{
  border-color:#fcdba9;
  background-color:#fff8ed;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%23ad5e18'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' d='M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5'/%3E%3Ccircle cx='7.5' cy='12' r='1' fill='currentColor'/%3E%3C/svg%3E");
  color:#ad5e18;
}

.c-callout--error,.c-callout--info,.c-callout--success,.c-callout--warning{
  background-repeat:no-repeat;
  background-position:24px 22px;
  padding-left:50px;
}

.c-callout--dialog{
  box-shadow:0 20px 28px 0 rgba(4, 68, 77, .15);
}

.c-callout--dialog.c-callout--error,.c-callout--dialog.c-callout--success,.c-callout--dialog.c-callout--warning{
  border-color:#d8dcde;
  background-color:#fff;
  color:#49545c;
}

.c-callout--error .c-callout__title{
  color:#681219;
}

.c-callout--success .c-callout__title{
  color:#0b3b29;
}

.c-callout--warning .c-callout__title{
  color:#703b15;
}

.c-callout--dialog.c-callout--error .c-callout__title{
  color:#cc3340;
}

.c-callout--dialog.c-callout--success .c-callout__title{
  color:#038153;
}

.c-callout--dialog.c-callout--warning .c-callout__title{
  color:#ad5e18;
}

.c-callout--error.is-rtl,.c-callout--info.is-rtl,.c-callout--success.is-rtl,.c-callout--warning.is-rtl{
  background-position:calc(100% - 24px) 22px;
  padding-right:50px;
  padding-left:40px;
}