@font-face {
    font-family: 'Atlantic Cruise';
    src: url('../webfonts/AtlanticCruise.eot');
    src: url('../webfonts/AtlanticCruise.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/AtlanticCruise.woff2') format('woff2'),
        url('../webfonts/AtlanticCruise.woff') format('woff'),
        url('../webfonts/AtlanticCruise.ttf') format('truetype'),
        url('../webfonts/AtlanticCruise.svg#AtlanticCruise') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'LAQUATSA';
    src: url('../webfonts/LAQUATSA.eot');
    src: url('../webfonts/LAQUATSA.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/LAQUATSA.woff2') format('woff2'),
        url('../webfonts/LAQUATSA.woff') format('woff'),
        url('../webfonts/LAQUATSA.ttf') format('truetype'),
        url('../webfonts/LAQUATSA.svg#LAQUATSA') format('svg');
    font-weight: normal;
    font-style: normal;
}

:focus{
    outline: 0;
    box-shadow: none!important;
}
.white-space-pre {white-space: pre-wrap;}
.cursor-pointer{cursor:pointer;}
.box-shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;}

body {
    background: #f5f6f7;
    color: #4d4e4e;
    line-height: 1.2;
}

body.dashboard-page,
body.provider-page,
body.budget-page,
body.idea-page,
body.task-page,
body.timeline-page,
body.secret-page{padding-top: 44px;}
body.secret-page .container-secrets{padding-top:80px;}
body.dashboard-page .container-dashboard,
body.idea-page .container-idea,
body.provider-page .container-provider{padding-top:38px;}
body.task-page .container-task{padding-top:48px;}

body.timeline-page, body.dash-panel-page {padding:30px; height: 100vh; background: url('../images/bg-wedding.jpeg') center center no-repeat;}
body.timeline-page #app,
body.dash-panel-page #app{
  display:flex;
  padding:5px;
  background:#fff;
  height: 100%;
  overflow: hidden;
  border-radius: 35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);}

.timeline-list::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    height: 100%;
    width: 4px;
    background: #f7f8f8;
}

/* panel admin */
.panel{border-radius: 30px; width: 100%;height: 100%; background: #f7f8f8;display: flex;}
  .panel-sidebar{
      height: 100%;
      width: 70px;
      padding: 0 5px;
      background: #17a2b8;
      border-top-right-radius: 12px;
      border-top-left-radius: 30px;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 30px;
  }
    .panel-sidebar-item{
      background: transparent;
      color:#fff;
      border-top-right-radius: 25px 25px;
      border-top-left-radius: 25px 25px;
      border-bottom-right-radius: 25px 25px;
      border-bottom-left-radius: 25px 25px;
    }
      .panel-sidebar-item a { padding-top:20px;padding-bottom:20px;}
        .panel-sidebar-item span {font-size: 0.6em}
    .panel-sidebar-item.active{
      background: #fff;
      color:#17a2b8;
    }
  .panel-bottombar {
      position: fixed;
      z-index:500;
      bottom:20px;
      height: 50px;
      right:0;
      left:0;
      margin-right: 40px;
      margin-left: 40px;
      padding: 5px 0px;
      background: #17a2b8;
      border-radius: 30px;
      box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.1)!important;
  }
    .panel-bottombar-item{
      background: transparent;
      color:#fff;
      border-radius: 30px;
    }
      .panel-bottombar-item a { padding: 1rem}
    .panel-bottombar-item.active{
      background: #fff;
      color:#17a2b8;
    }
  .panel-container{
      overflow: auto;
      height: 100%;
      width: calc(100% - 70px);
      border-top-right-radius: 30px;
      border-top-left-radius: 12px;
      border-bottom-right-radius: 30px;
      border-bottom-left-radius: 12px;
  }



/* logo */
.logo-first{font-weight: 700}
.logo-last{font-weight: 700; color:#FFFFFF;}

/* backgrounds */
.bg-green {background-color: #13B79C;}
.bg-greenwater {background-color: #17a2b8;}
.bg-rose {background-color: #e42e5d;}
.bg-grey {background-color: #f7f8f8;}
.bg-white {background-color: #ffffff;}
.bg-blue {background-color: #3C8DBC;color:#ffffff;}

/* padding */
.pt-6, .py-6 {padding-top: 5rem;}
.pb-6, .py-6 {padding-bottom: 5rem;}
.pb-80px {padding-bottom:80px;}

/* margin */
.m-n2px {margin: -2px;}

/* border */
.bl-0 {border-left:0px!important;}
.br-0 {border-right:0px!important;}
.bt-0 {border-top:0px!important;}
.bb-0 {border-bottom:0px!important;}
.border-left{ border-left:1px solid #F5F6F7; }
.border-right{ border-right:1px solid #F5F6F7; }
.border-top{ border-top:1px solid #F5F6F7; }
.border-bottom{ border-bottom:1px solid #F5F6F7; }

/* border-radius */
.border-radius-50{border-radius: 50%}
.border-radius-12px{border-radius: 12px}

/* position */
.absolute{position:absolute!important;}
.fixed{position:fixed!important;}

.bottom-1 {bottom:1px;}
.bottom-2 {bottom:2px;}
.bottom-5 {bottom:5px;}
.top-1 {top:1px;}
.top-2 {top:2px;}
.top-5 {top:5px;}
.top-n5{top:-5px;}
.top-n10{top:-10px;}
.top-n30{top:-30px;}
.left-1 {left:1px;}
.left-2 {left:2px;}
.left-5 {left:5px;}
.right-1 {right:1px;}
.right-2 {right:2px;}
.right-5 {right:5px;}

/* height */
.height-100{height: 100%}
.height-50{height: 50%}

.height-100vh{height: 100vh!important}
.height-90vh{height: 90vh!important}

.min-height-30px{min-height: 30px;}

/* width */
.width-100vw{width: 100vw!important}
.width-90vw{width: 90vw!important}

.min-width-100px{min-width:100px;}
.min-width-200px{min-width:200px;}

.max-width-100px{max-width:100px;}
.max-width-200px{max-width:200px;}

/* overflow */
.overflow-hidden{overflow: hidden}
.overflow-auto{overflow: auto}
.overflow-scroll{overflow: scroll}

/* card */
.card {
    padding: 15px 0;
    border-radius: 12px;
    margin-top: 24px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    border: none;
}
  .card-title {
      font-size: 1.2em;
      margin-bottom: 1em;
      font-weight: 700;
  }
.card-rounded{padding:10px; border-radius: 30px;}
.card-panel{height:100%; overflow:hidden; margin-top: 0; box-shadow:none; height: 100%; overflow: auto; padding:30px 20px 20px;}
.card-panel-right{border-top-left-radius: 30px;border-bottom-left-radius:30px;}
.card-panel-left{border-top-right-radius: 30px;border-bottom-right-radius:30px;}
.card-primary{background-color: rgba(60, 141, 188, 0.1);color:#3C8DBC;}
.card-greenwater{background: rgba(23, 162, 184, 0.1)!important;color: #17a2b8;}
.card-green{background-color: rgba(0, 198, 167, 0.1); color:#00c6a7;}
.card-violet{background-color: rgba(98, 107, 185, 0.1); color:#626bb9;}
.card-purple{background-color: rgba(153, 124, 183, 0.1); color:#997cb7;}
.card-rose{background: rgba(228, 46, 93, 0.1)!important;color: #e42e5d;}
.card-orange{background: rgba(249, 170, 42, 0.1)!important;color: #f9aa2a;}

/* box */
.box-rsvp {padding-bottom: 0}
.box{padding:10px;}

/* button */
.btn-group-xs>.btn, .btn-xs {
    padding: 0.25rem 0.3rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border-radius: 0.2rem;
}
.btn-group-rounded{padding: 0.375rem 0.375rem 0.375rem 0.75rem;}
.btn-group-rounded .btn-rounded{margin-left: 0.60rem;}

.btn-size-70{ width:70px; padding: 0.5rem 0.5px; }
.btn-size-75{ width:75px; padding: 0.5rem 0.5px; }
.btn-size-100{ width:100px; padding: 0.5rem 0.5px; }
.btn-size-110{ width:110px; padding: 0.5rem 0.5px; }

.btn-middle-size{font-size: 0.9rem;}

.btn-rounded-50 {border-radius: 50%;}
.btn-rounded {border-radius:30px;}

.btn-shadow-greenwater{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1)!important;background: #17a2b8!important;color: #ffffff;}
.btn-shadow-greenwater:hover, .btn-shadow-greenwater:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: rgba(23, 162, 184, 1)!important;color: #ffffff;}
.btn-shadow-greenwater-light{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: rgba(23, 162, 184, 0.1)!important;color: #17a2b8;}
.btn-shadow-greenwater-light:hover, .btn-shadow-greenwater-light:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: rgba(23, 162, 184, 0.1)!important;color: #17a2b8;}
.btn-shadow-greenwater-reverse{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: #ffffff!important;color: #17a2b8;}
.btn-shadow-greenwater-reverse:hover, .btn-shadow-greenwater-reverse:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: #ffffff!important;color: #17a2b8;}
.btn-shadow-red{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1)!important;background: #e42e5d!important;color: #ffffff;}
.btn-shadow-red:hover, .btn-shadow-red:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: #e42e5d!important;color: #ffffff;}
.btn-shadow-red-light{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1)!important;background: rgba(228, 46, 93, 0.1)!important;color: #e42e5d;}
.btn-shadow-red-light:hover, .btn-shadow-red-light:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: rgba(228, 46, 93, 0.1)!important;color: #e42e5d;}
.btn-shadow-white{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1)!important;background: #ffffff!important;color: #4d4e4e;}
.btn-shadow-white:hover, .btn-shadow-white:focus{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)!important;background: #ffffff!important;color: #4d4e4e;}

.btn-default{background: #4d4e4e;border-color: #4d4e4e;color:#fff;}
.btn-default-outline{color: #4d4e4e;border-color: #808080}
.btn-orange {color: #ffffff;background: #fcb116;border-color: #fcb116;}
.btn-red {color: #ffffff;background: #e42e5d;border-color: #e42e5d;}
.btn-dark-blue {border: 1px solid #3b5998;background: #3b5998;color: #ffffff;}
.btn-dark-blue:hover{border: 1px solid #3b5998;background: #ffffff;color: #3b5998;}
.btn-green {border: 1px solid #13B79C;background: #13B79C;color: #ffffff;}
.btn-green:hover{border: 1px solid #13B79C;background: #ffffff;color: #13B79C;}
.btn-rose {border: 1px solid #ff0087;background: #ff0087;color: #ffffff;}
.btn-rose:hover{border: 1px solid #ff0087;background: #ffffff;color: #ff0087;}
.btn-primary {border: 1px solid #3C8DBC!important;background: #3C8DBC!important;color: #ffffff;}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:active,
.btn-primary:hover{border: 1px solid #3C8DBC!important;background: #ffffff!important;color: #3C8DBC!important;}
.btn-outline-primary{color: #3C8DBC;border-color: #3C8DBC;}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:active, .btn-outline-primary:hover {color: #fff;background-color: #3C8DBC;border-color: #3C8DBC;}
.btn-greenwater {border: 1px solid #17a2b8!important;background: #17a2b8!important;color: #ffffff;}
.btn-greenwater:hover{border: 1px solid #17a2b8!important;background: #ffffff!important;color: #17a2b8!important;}
.btn-outline-greenwater{color: #17a2b8;border-color: #17a2b8;}
.btn-outline-greenwater:hover {color: #fff;background-color: #17a2b8;border-color: #17a2b8;}

/* links */
a:hover{color:#17a2b8;}
a.a-unstyle{color:inherit;}
a.a-unstyle:hover,a.a-unstyle:focus,a.a-unstyle:active{color:inherit;}
a.a-full{cursor:pointer;height: 100%;width: 100%;}
a.link-underline{cursor:pointer;padding:0 0 3px;border-bottom:2px solid transparent;color:#000000;}
a.link-underline:hover{border-bottom:2px solid #000000;text-decoration: none;}
a.link-underline-primary:hover, a.link-underline-primary.active, a.link-underline-primary:active, a.link-underline-primary:focus{color:#3C8DBC;border-bottom-color:#3C8DBC }
a.link-underline-greenwater:hover, a.link-underline-greenwater.active, a.link-underline-greenwater:active, a.link-underline-primary:focus{color:#17a2b8;border-bottom-color:#17a2b8 }

.hover-shadow:hover{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);}
.hover-rounded-shadow:hover{box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);border-radius:30px;}

/* badge */
.badge-primary {background-color: #3C8DBC!important;}
.badge-primary-light {background-color: rgba(60, 141, 188, 0.1);color:#3C8DBC;}
.badge-rose {background-color: #ff0087; color:#fff;}
.badge-rose-light {background-color: rgba(228, 46, 93, 0.1); color:#ff0087;}
.badge-red {background-color: #e42e5d; color:#fff;}
.badge-red-light {background-color: rgba(228, 46, 93, 0.718); color:#fff}
.badge-orange {background-color: #f9aa2a; color:#fff;}
.badge-orange-light {background-color: rgba(249, 170, 42, 0.1); color:#f9aa2a;}
.badge-marron {background-color: #f7c054; color:#fff;}
.badge-green {background-color: #00c6a7; color:#fff;}
.badge-green-light {background-color: rgba(0, 198, 167, 0.1); color:#00c6a7;}
.badge-greenwater {background-color: #17a2b8; color:#fff;}
.badge-greenwater-light {background-color: rgba(23, 162, 184, 0.1); color:#17a2b8;}
.badge-violet {background-color: #626bb9; color:#fff;}
.badge-violet-light {background-color: rgba(98, 107, 185, 0.1); color:#626bb9;}
.badge-purple {background-color: #997cb7; color:#fff;}
.badge-purple-light {background-color: rgba(153, 124, 183, 0.1); color:#997cb7;}
.badge-grey {background-color: #8a8a8a; color:#fff;}

.btn-rounded .badge{border-radius: 30px;}

/* line-height */
.line-height-20px{line-height: 20px}

/* typo */
.text-truncate{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.text-atlantic{ font-family: 'Atlantic Cruise' }
.text-laquatsa{ font-family: 'LAQUATSA' }

.text-primary {color: #3C8DBC!important;}
.text-greenwater {color: #17a2b8;}
.text-greenwater-light {color: #E0F0F2;}
.text-green {color: #13b79d;}
.text-grey {color: #8a8a8a;}
.text-black {color: #4d4e4e;}
.text-dark-black {color: #000000;}
.text-violet {color: #626bb9;}
.text-purple {color: #997cb7;}
.text-red {color: #e42e5d;}
.text-red-light {color: #ff7c66;}
.text-rose {color: #ff0087;}
.text-rose-light {color: #F6E3E8;}
.text-orange {color: #fcb116;}
.text-marron {color: #f7c054;}

.text-small{font-size: 0.7em}

.font-11{font-size:11px}
.font-12{font-size:12px}
.font-14{font-size:14px}
.font-16{font-size:16px}

.font-r05{font-size:0.5rem}
.font-r06{font-size:0.6rem}
.font-r07{font-size:0.7rem}
.font-r08{font-size:0.8rem}
.font-r09{font-size:0.9rem}

.font-x2{font-size:1.2em}
.font-x3{font-size:1.3em}
.font-x4{font-size:1.4em}
.font-x5{font-size:1.5em}
.font-x6{font-size:1.6em}
.font-x7{font-size:1.7em}
.font-x8{font-size:1.8em}
.font-x9{font-size:1.9em}
.font-x10{font-size:2em}

/* Form */
.rw-state-focus .rw-popup-container{padding:0 1em;}
.rw-multiselect>.rw-widget-picker {padding-bottom: 12px;padding-left:10px;border-radius: 30px;}
.rw-multiselect-tag{padding:0.35em;background-color: #3C8DBC;border: 1px solid #3C8DBC;color: #fff;border-radius: 30px;}

.input-16{font-size: 16px;}
.form-control-rounded{border-radius: 30px;}
.form-control-rounded-shadow, .form-control-rounded-shadow:focus{border-radius: 30px; box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1)!important; border:0;}

.input-group-rounded {border: 1px solid #EFEFEF;border-radius: 30px;padding: 2px;}
.input-group-rounded input{border:none;}
.input-group-rounded input,
.input-group-rounded .input-group-append .btn,
.input-group-rounded .input-group-append .input-group-text,
.input-group-rounded .input-group-prepend .input-group-text,
.input-group-rounded .input-group-append,
.input-group-rounded .input-group-prepend{border-radius: 30px!important;}
.input-group-rounded .input-group-append{margin-left: 2px;}
.input-group-rounded .input-group-prepend{margin-right: 2px;}

label{font-size: 0.9rem}
.help-block{font-size: 0.8rem; text-align: right}

/* dropdown */
.dropdown-toggle::before{display: none!important;}

/* Table */
.table-grey-light, .table-grey-light>td, .table-grey-light>th {background-color: #eeeeee}
.table-grey-light tbody+tbody, .table-grey-light td, .table-grey-light th, .table-grey-light thead th{border-color: #eeeeee}
table.td-align-middle td,
table.td-align-middle tr th {vertical-align: middle;}
table.table-no-border thead th{border-top:0;}
table.bt-0 tr th{border-top:0px!important;}
table.bl-0 tr td:first-child,table.bl-0 tr th:first-child{border-left:0px!important;}
table.br-0 tr td:last-child,table.br-0 tr th:last-child{border-right:0px!important;}
table.table-sm tr td .dropdown-toggle.btn{padding-top:0; padding-bottom:0;}

/* modal */
.modal-content{border-radius:12px;}

/* List */
.rounded-li{
    background: #fff;
    padding: 10px 20px 10px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.li-autocomplete{
    padding: 5px 10px;
    border-bottom: 1px solid #efefef;
    margin-top: 5px;
    margin: 5px 5px 0;
}

/* Navbar */
.navbar{padding:0.3rem; }
.navbar-container {padding-top:48.5px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);background: #fff}

/* sidebar menu */
.bm-menu-wrap {background: #ffffff;}
.bm-item {line-height: 45px;font-size: 1em;color:#4d4d4d;font-weight: 400;padding-left: 15px;border-bottom: 1px solid #c8c8c8;}
.bm-item:hover{text-decoration: none;}

/* header */
.header-menu{font-size: 22px;}
/*.header-menu a{border-radius: 50%; border: 1px solid transparent; padding: 10px;}*/
/*.header-menu a:hover, .header-menu a.active{color: #3C8DBC; text-decoration: none; border: 1px solid #3C8DBC;}*/

/* Website pages */
.home-page, .info-page, .wedding-page, .invited-login-page, .profile-page, .privacy-page, .support-page { min-height: 100vh; background: url('../images/bg-wedding.jpeg') center center no-repeat;}
.home-page #app, .info-page #app, .wedding-page #app, .invited-login-page #app, .profile-page #pp{ height:100%;}
.home-page #app .home-row{height:100%;}
.home-page .row-invited{border-bottom: 1px solid #E3E3E3;}

/* alert */
.alert-toast{position: fixed;top: 10px;right: 0;z-index: 9999;left: 0;margin: 0 auto;}

/* timeline */
.timeline-panel{position:relative;height:auto;padding-left:30px;padding-bottom: 80px}
.timeline-panel:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 10px;
    width: 2px;
    top: 0;
    bottom: 0;
    z-index: 400;
}
  .timeline-panel-time:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #17a2b8;
    left: 3px;
    width: 16px;
    height: 16px;
    z-index: 400;
  }
.vertical-timeline-element--work .vertical-timeline-element-content{border-top: 3px solid #17a2b8}
.vertical-timeline-element-icon svg {
    display: block;
    width: 24px!important;
    height: 24px!important;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
}
.vertical-timeline-element-title{font-size: 1.25rem;}
.vertical-timeline-element-subtitle{font-size:1rem;}

@media only screen and (max-width: 1024px) {
  .vertical-timeline-element-content{padding-top:1.5rem;}
  .vertical-timeline-element-content .vertical-timeline-element-date{position: absolute;top: 3px;padding:0;}
}

@media only screen and (max-width: 767px) {
  .sm-px-10x{padding-left: 10px; padding-right: 10px}
  .sm-py-10x{padding-top: 10px; padding-bottom: 10px}
}

@media only screen and (max-width: 574px) {
  .home-page, .info-page, .wedding-page, .invited-login-page {
    background: url('../images/bg-wedding.jpeg') -400px center no-repeat;
  }
  .card-body:not(.no-admin){padding:0rem;}
  .card-title{padding:0 0.5rem}

  .vertical-timeline-element-title{font-size:0.8rem;}
  .vertical-timeline-element-subtitle{font-size: 0.7rem;}

  body.dash-panel-page{padding:0;}
  body.dash-panel-page #app{border-radius:0;padding:0;}
  body.dash-panel-page .panel{border-radius:0;}
  .panel-container{width: 100%};
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}