.ng-modal{
    max-height: 100%;
}

.ng-modal-overlay {
    position: fixed;
    z-index:9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#4c4c4c;
    opacity: 0.8;
}
.ng-modal-back{
    flex:1 1 auto;
    -webkit-box-flex:1 1 auto;
    -webkit-flex:1 1 auto;
    -ms-flex:1 1 auto;
    text-align:left;	
    font-size:1.5em;
    min-width:25px;
}
.ng-modal-header{
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;

    flex-direction: row; 
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;

    align-items: center; 
    -webkit-align-items: center;
    -ms-flex-align: center;

    height:50px; 
    padding:15px;
    background-color:#000;
}
.ng-modal-title{
    flex:3 1 100%;
    -webkit-box-flex:3 1 100%;
    -webkit-flex:3 1 100%;
    -ms-flex:3 1 100%;
    text-align:center;
}
.ng-modal-title h4{
    color: #fff;
    font-family: "Lato",Helvetica,Arial,sans-serif,sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.7em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
.ng-modal-dialog {
    z-index:10000;
    position: fixed;
    width: 100%;
    max-width:600px;
    top: 50%;
    height:auto;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background-color: #fff;
    max-height: 100%;
/*    overflow: hidden;*/
    overflow-y: auto;
}
.ng-modal-dialog-content {
    padding:0;
    text-align: left;
}
.ng-modal-close {
    flex:1 1 auto;
    -webkit-box-flex:1 1 auto;
    -webkit-flex:1 1 auto;
    -ms-flex:1 1 auto;
    text-align:right;
    font-size:1.5em
}



/***********************
******Date Modal*******
**********************/
.ng-modal-header.calendar{
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:infinite;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.ng-modal-header.calendar.start{
    background-color: #19c235;
    -webkit-animation-name: rotate-bg-cal-start;
    animation-name: rotate-bg-cal-start;
}

@-webkit-keyframes rotate-bg-cal-start {
    0% {background-color:#19c235;}
    50% {background-color:#05831a;}
    100% {background-color:#19c235;} 
}

@keyframes rotate-bg-cal-start {
    0% {background-color:#19c235;}
    50% {background-color:#05831a;}
    100% {background-color:#19c235;} 
}

.ng-modal-header.calendar.end{
    background-color: #ff6666;
    -webkit-animation-name: rotate-bg-cal-end;
    animation-name: rotate-bg-cal-end;
}

@-webkit-keyframes rotate-bg-cal-end {
    0% {background-color:#ff6666;}
    50% {background-color:#c01b1b;}
    100% {background-color:#ff6666;} 
}

@keyframes rotate-bg-cal-end {
    0% {background-color:#ff6666;}
    50% {background-color:#c01b1b;}
    100% {background-color:#ff6666;} 
}



/***********************
******Time Modal*******
**********************/
.ng-modal-header.time{
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count:infinite;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.ng-modal-header.time.start{
    background-color: #19c235;
    -webkit-animation-name: rotate-bg-cal-start;
    animation-name: rotate-bg-cal-start;
}

@-webkit-keyframes rotate-bg-cal-start {
    0% {background-color:#19c235;}
    50% {background-color:#05831a;}
    100% {background-color:#19c235;} 
}

@keyframes rotate-bg-cal-start {
    0% {background-color:#19c235;}
    50% {background-color:#05831a;}
    100% {background-color:#19c235;} 
}

.ng-modal-header.time.end{
    background-color: #ff6666;
    -webkit-animation-name: rotate-bg-cal-end;
    animation-name: rotate-bg-cal-end;
}

@-webkit-keyframes rotate-bg-cal-end {
    0% {background-color:#ff6666;}
    50% {background-color:#c01b1b;}
    100% {background-color:#ff6666;} 
}

@keyframes rotate-bg-cal-end {
    0% {background-color:#ff6666;}
    50% {background-color:#c01b1b;}
    100% {background-color:#ff6666;} 
}





/*************************************
******Service Description Modal*******
**************************************/
.ng-modal-header.service-desc{
    background-color: #ffffff;
}

.service-desc .icon-cross2:before{color:#000;}
.service-desc .infowrap {
    align-items: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 15px 40px;
    font-size:1.1em;
}
.service-desc .infowrapsize {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 450px;
    padding: 0;
    width: 100%;
}
.infowrap h2{font-size:1.3em;}
.infowrap p{font-size:1em;}


/***********************
******Login Modal*******
**********************/
.ng-modal-header.addtocalendar{
    background-color: #ffffff;
    border-bottom: 1px solid #000000;
}
.addtocalendar .icon-cross2:before{color:#000;}
.addtocalendar .ng-modal-title h4{color:#000;}

/***********************
******Login Modal*******
**********************/
.ng-modal-header.login{
    background-color: #ffffff;
    border-bottom: 1px solid #000;
}
.login .icon-cross2:before{color:#000;}
.login .ng-modal-title h4{color:#000;}




.ng-modal.ng-enter {
  transition: opacity .3s ease-out;
  opacity: 0;
}
.ng-modal.ng-enter.ng-enter-active {
  opacity: 1;
}
.ng-modal.ng-leave {
  transition: opacity .3s ease-out;
  opacity: 1;
}
.ng-modal.ng-leave.ng-leave-active {
  opacity: 0;
}