/*! * # Semantic UI 2.3.0 - Modal * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */
.ui.modal{
  display:none;
  z-index:1001;
  text-align:left;
  background:#fff;
  border:none;
  -webkit-box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);
  box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);
  -webkit-transform-origin:50% 25%;
  transform-origin:50% 25%;
  -webkit-box-flex:0;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
  border-radius:.28571429rem;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  will-change:top,left,margin,transform,opacity
}
.ui.modal>.icon:first-child+*,.ui.modal>:first-child:not(.icon){
  border-top-left-radius:.28571429rem;
  border-top-right-radius:.28571429rem
}
.ui.modal>:last-child{
  border-bottom-left-radius:.28571429rem;
  border-bottom-right-radius:.28571429rem
}
.ui.modal>.close{
  cursor:pointer;
  position:absolute;
  top:-2.5rem;
  right:-2.5rem;
  z-index:1;
  opacity:.8;
  font-size:1.25em;
  color:#fff;
  width:2.25rem;
  height:2.25rem;
  padding:.625rem 0 0 0
}
.ui.modal>.close:hover{
  opacity:1
}
.ui.modal>.header{
  display:block;
  font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  background:#fff;
  margin:0;
  padding:1.25rem 1.5rem;
  -webkit-box-shadow:none;
  box-shadow:none;
  color:rgba(0,0,0,.85);
  border-bottom:1px solid rgba(34,36,38,.15)
}
.ui.modal>.header:not(.ui){
  font-size:1.42857143rem;
  line-height:1.28571429em;
  font-weight:700
}
.ui.modal>.content{
  display:block;
  width:100%;
  font-size:1em;
  line-height:1.4;
  padding:1.5rem;
  background:#fff
}
.ui.modal>.image.content{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row
}
.ui.modal>.content>.image{
  display:block;
  -webkit-box-flex:0;
  -ms-flex:0 1 auto;
  flex:0 1 auto;
  width:'';
  -ms-flex-item-align:top;
  align-self:top
}
.ui.modal>[class*="top aligned"]{
  -ms-flex-item-align:top;
  align-self:top
}
.ui.modal>[class*="middle aligned"]{
  -ms-flex-item-align:middle;
  align-self:middle
}
.ui.modal>[class*=stretched]{
  -ms-flex-item-align:stretch;
  align-self:stretch
}
.ui.modal>.content>.description{
  display:block;
  -webkit-box-flex:1;
  -ms-flex:1 0 auto;
  flex:1 0 auto;
  min-width:0;
  -ms-flex-item-align:top;
  align-self:top
}
.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{
  -webkit-box-flex:0;
  -ms-flex:0 1 auto;
  flex:0 1 auto;
  min-width:'';
  width:auto;
  padding-left:2em
}
.ui.modal>.content>.image>i.icon{
  margin:0;
  opacity:1;
  width:auto;
  line-height:1;
  font-size:8rem
}
.ui.modal>.actions{
  background:#f9fafb;
  padding:1rem 1rem;
  border-top:1px solid rgba(34,36,38,.15);
  text-align:right
}
.ui.modal .actions>.button{
  margin-left:.75em
}
@media only screen and (max-width:767px){
  .ui.modal{
    width:95%;
    margin:0
  }
}
@media only screen and (min-width:768px){
  .ui.modal{
    width:88%;
    margin:0
  }
}
@media only screen and (min-width:992px){
  .ui.modal{
    width:850px;
    margin:0
  }
}
@media only screen and (min-width:1200px){
  .ui.modal{
    width:900px;
    margin:0
  }
}
@media only screen and (min-width:1920px){
  .ui.modal{
    width:950px;
    margin:0
  }
}
@media only screen and (max-width:991px){
  .ui.modal>.header{
    padding-right:2.25rem
  }
  .ui.modal>.close{
    top:1.0535rem;
    right:1rem;
    color:rgba(0,0,0,.87)
  }
}
@media only screen and (max-width:767px){
  .ui.modal>.header{
    padding:.75rem 1rem!important;
    padding-right:2.25rem!important
  }
  .ui.modal>.content{
    display:block;
    padding:1rem!important
  }
  .ui.modal>.close{
    top:.5rem!important;
    right:.5rem!important
  }
  .ui.modal .image.content{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
  }
  .ui.modal .content>.image{
    display:block;
    max-width:100%;
    margin:0 auto!important;
    text-align:center;
    padding:0 0 1rem!important
  }
  .ui.modal>.content>.image>i.icon{
    font-size:5rem;
    text-align:center
  }
  .ui.modal .content>.description{
    display:block;
    width:100%!important;
    margin:0!important;
    padding:1rem 0!important;
    -webkit-box-shadow:none;
    box-shadow:none
  }
  .ui.modal>.actions{
    padding:1rem 1rem 0!important
  }
  .ui.modal .actions>.button,.ui.modal .actions>.buttons{
    margin-bottom:1rem
  }
}
.ui.inverted.dimmer>.ui.modal{
  -webkit-box-shadow:1px 3px 10px 2px rgba(0,0,0,.2);
  box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)
}
.ui.basic.modal{
  background-color:transparent;
  border:none;
  border-radius:0;
  -webkit-box-shadow:none!important;
  box-shadow:none!important;
  color:#fff
}
.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{
  background-color:transparent
}
.ui.basic.modal>.header{
  color:#fff
}
.ui.basic.modal>.close{
  top:1rem;
  right:1.5rem
}
.ui.inverted.dimmer>.basic.modal{
  color:rgba(0,0,0,.87)
}
.ui.inverted.dimmer>.ui.basic.modal>.header{
  color:rgba(0,0,0,.85)
}
@media only screen and (max-width:991px){
  .ui.basic.modal>.close{
    color:#fff
  }
}
.ui.loading.modal{
  display:block;
  visibility:hidden;
  z-index:-1
}
.ui.active.modal{
  display:block
}
.modals.dimmer[class*="top aligned"] .modal{
  margin:5vh auto
}
.scrolling.dimmable.dimmed{
  overflow:hidden
}
.scrolling.dimmable>.dimmer{
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start
}
.scrolling.dimmable.dimmed>.dimmer{
  overflow:auto;
  -webkit-overflow-scrolling:touch
}
.scrolling.dimmable>.dimmer{
  position:fixed
}
.modals.dimmer .ui.scrolling.modal{
  margin:1rem auto!important
}
.scrolling.undetached.dimmable.dimmed{
  overflow:auto;
  -webkit-overflow-scrolling:touch
}
.scrolling.undetached.dimmable.dimmed>.dimmer{
  overflow:hidden
}
.scrolling.undetached.dimmable .ui.scrolling.modal{
  position:absolute;
  left:50%;
  margin-top:1rem!important
}
.ui.modal .scrolling.content{
  max-height:calc(70vh);
  overflow:auto
}
.ui.fullscreen.modal{
  width:95%!important;
  left:0!important;
  margin:1em auto
}
.ui.fullscreen.scrolling.modal{
  left:0!important
}
.ui.fullscreen.modal>.header{
  padding-right:2.25rem
}
.ui.fullscreen.modal>.close{
  top:1.0535rem;
  right:1rem;
  color:rgba(0,0,0,.87)
}
.ui.modal{
  font-size:1rem
}
.ui.mini.modal>.header:not(.ui){
  font-size:1.3em
}
@media only screen and (max-width:767px){
  .ui.mini.modal{
    width:95%;
    margin:0
  }
}
@media only screen and (min-width:768px){
  .ui.mini.modal{
    width:35.2%;
    margin:0
  }
}
@media only screen and (min-width:992px){
  .ui.mini.modal{
    width:340px;
    margin:0
  }
}
@media only screen and (min-width:1200px){
  .ui.mini.modal{
    width:360px;
    margin:0
  }
}
@media only screen and (min-width:1920px){
  .ui.mini.modal{
    width:380px;
    margin:0
  }
}
.ui.small.modal>.header:not(.ui){
  font-size:1.3em
}
@media only screen and (max-width:767px){
  .ui.tiny.modal{
    width:95%;
    margin:0
  }
}
@media only screen and (min-width:768px){
  .ui.tiny.modal{
    width:52.8%;
    margin:0
  }
}
@media only screen and (min-width:992px){
  .ui.tiny.modal{
    width:510px;
    margin:0
  }
}
@media only screen and (min-width:1200px){
  .ui.tiny.modal{
    width:540px;
    margin:0
  }
}
@media only screen and (min-width:1920px){
  .ui.tiny.modal{
    width:570px;
    margin:0
  }
}
.ui.small.modal>.header:not(.ui){
  font-size:1.3em
}
@media only screen and (max-width:767px){
  .ui.small.modal{
    width:95%;
    margin:0
  }
}
@media only screen and (min-width:768px){
  .ui.small.modal{
    width:70.4%;
    margin:0
  }
}
@media only screen and (min-width:992px){
  .ui.small.modal{
    width:680px;
    margin:0
  }
}
@media only screen and (min-width:1200px){
  .ui.small.modal{
    width:720px;
    margin:0
  }
}
@media only screen and (min-width:1920px){
  .ui.small.modal{
    width:760px;
    margin:0
  }
}
.ui.large.modal>.header{
  font-size:1.6em
}
@media only screen and (max-width:767px){
  .ui.large.modal{
    width:95%;
    margin:0
  }
}
@media only screen and (min-width:768px){
  .ui.large.modal{
    width:88%;
    margin:0
  }
}
@media only screen and (min-width:992px){
  .ui.large.modal{
    width:1020px;
    margin:0
  }
}
@media only screen and (min-width:1200px){
  .ui.large.modal{
    width:1080px;
    margin:0
  }
}
@media only screen and (min-width:1920px){
  .ui.large.modal{
    width:1140px;
    margin:0
  }
}