/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
:root {
    --agile-integrate-modal-color: rgb(76,76,76);
    --agile-integrate-color1: rgb(0,119,184);
}

[class^='agile-integrate'] a { text-decoration: none; color: var(--agile-integrate-color1); cursor: pointer; }
[class^='agile-integrate'] a:hover { opacity: .8; }

.agile-integrate-myprofile-icon .fa, .agile-integrate-cart-icon .fa, .agile-integrate-minical .fa, .agile-integrate-myaccount-icon .fa, .agile-integrate-myaccount-icon .fa-solid, .agile-integrate-account-icon .fa, .agile-integrate-account-icon .fa-solid { cursor:pointer; font-size: 25px; }
.agile-integrate-cart-icon { display: inline-block; position: relative; }
.agile-integrate-cart-icon-count { display: inline-block; position: absolute; font-size: 12px; top: -20px; right: 5px; border-radius: 50%; padding: 2px 5px; background-color: rgba(255,0,0,.75); color: white; }
.agile-integrate-nav-menu { position:relative; padding: 0px; margin: 0px; min-height: 40px; }
.agile-integrate-nav-menu li { list-style-type: none; float: left; position:relative; }
.agile-integrate-nav-menu li a { display: inline-block; padding: 6px 8px; }
.agile-integrate-nav-menu li li { float: none; }
.agile-integrate-nav-menu li li a { display: block; text-align:left; }
.agile-integrate-nav-menu li ul { position: absolute; top: 28px; width: 300px; padding: 0px; left: 0px; z-index:9999; background-color: white; border: solid 2px rgba(128,128,128,.2); box-shadow: 0px 0px 20px 0px rgba(0,0,0,.6); }
.agile-integrate-nav-menu li[aria-expanded='false'] ul { display: none; }
.agile-integrate-show { padding: 10px; margin: 20px; border-radius: 8px; background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,.6); }
.agile-integrate-show .agile-integrate-image img { max-width: 150px; }
.agile-integrate-show .agile-integrate-name { cursor: pointer; padding: 4px; }
.agile-integrate-minical .minical-container { display: none; position: relative; display: inline-block; width: 400px; max-width:80vw; margin: 8px; padding: 10px; border-radius: 8px; background-color: white; box-shadow: 0px 0px 4px 0px rgba(0,0,0,.6); }
.agile-integrate-minical .btn-prev, .agile-integrate-minical .btn-next { border-radius: 50%; padding: 2px; font-weight: bold; font-size: 12px; width: 11px; height: 12px; background-color: var(--agile-integrate-color1); color: white; }
.agile-integrate-minical .btn-prev { position: absolute; left: 10px; }
.agile-integrate-minical .btn-next { position: absolute; right: 10px; }
.agile-integrate-minical .month { display: block; text-align: center; }
.agile-integrate-minical table { width: 100%; }
.agile-integrate-minical td { width: calc(100% / 7); text-align: center; border-radius: 4px; }
.agile-integrate-minical td.off-month { opacity: .2; }
.agile-integrate-minical td.has-events { background-color: rgba(144,144,144,.8); }
.agile-integrate-minical-icon { position: relative; display: inline-block; }
.agile-integrate-minical-icon a { cursor: pointer; }
.agile-integrate-minical-icon .minical-container { display:block; position: absolute; top: 22px; right: 0px; z-index: 90000; }
.agile-integrate-minical-icon[aria-expanded='false'] .minical-container { display: none; }
.agile-integrate-account-icon { display: inline-block; position: relative; }
/*.agile-integrate-account-icon > ax { padding: 0px; width:25px; height: 25px; text-align: center; border-radius: 50%; display:inline-block; color: white; background-color: var(--agile-integrate-color1); }*/
.agile-integrate-account-icon > a .fa-solid { font-size: 25px; }
.agile-integrate-account-icon > a.agile-integrate-user-initial { }
.agile-integrate-account-icon > a.agile-integrate-user-initial > span { display: inline-block; font-size: 25px; line-height:25px;font-family: sans-serif; width: 25px; text-align:center; background-color: var(--agile-integrate-color1); color:white; border-radius:10px; }
.agile-integrate-account-icon > div { display: block; position: absolute; top: 22px; right: -4px; margin: 8px; padding: 10px; border-radius: 8px; background-color: white; box-shadow: 0px 0px 4px 0px rgba(0,0,0,.6); }
.agile-integrate-account-icon > div > a { display: block; min-width: 200px; padding: 2px; }
.agile-integrate-account-icon[aria-expanded='false'] > div { display: none; }

i.agile-integrate-mycalico { cursor:pointer; }
i.agile-integrate-mycalico:before { font: var(--fa-font-regular); content: "\f271"; }
i.agile-integrate-mycalico-added:before { content: "\f272"; }
i.agile-integrate-mycalico-purchased { cursor: unset; }
i.agile-integrate-mycalico-purchased:before { content: "\f274"; }

body.agile-integrate-modal-open { overflow:hidden; }
body.agile-integrate-modal-open #agile-integrate-modal * { display: block; }
#agile-integrate-modal { display: none; }
#agile-integrate-modal { padding: 20px 0px; position: fixed; z-index: 999000; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; background-color: rgba(0,0,0,0.85); }

.agile-mode-popup .agile-integrate-modal-container {
    border-style: solid; border-width: 6px; border-color: var(--agile-integrate-modal-color); position: relative;
    background-color: #fefefe; margin: auto; padding: 0px; border-radius: 8px; width: 95%; height: 90%; max-width: 1200px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s;
    animation-name: animatetop; animation-duration: 0.4s;
}
.agile-integrate-modal-header {
    padding: 4px;
    background-color: var(--agile-integrate-modal-color);
    position: relative;
}
a.agile-integrate-modal-close {
    position: absolute;
    top: 2px;
    right: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    line-height: 18px;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 50%;
    background-color: white;
    color: var(--agile-integrate-modal-color);
}
.agile-integrate-modal-title { font-size: 15px; font-weight: bold; color: white; padding: 0px; margin: 0px; }
.agile-integrate-modal-body {
    padding: 10px 0px;
    width: calc(100% - 20px);
    height: calc(100% - 50px);
    margin: auto;
}

#agile-integrate-modal.agile-mode-sidebar { padding: 0px; }
.agile-mode-sidebar .agile-integrate-modal-header { padding: 5px; }
.agile-mode-sidebar .agile-integrate-modal-close { right:unset; left: 8px; }
.agile-mode-sidebar .agile-integrate-modal-title { margin-left: 32px; }
.agile-mode-sidebar .agile-integrate-modal-body { padding: 0px; width: 100%; height:100%; margin: unset; }
.agile-mode-sidebar .agile-integrate-modal-container {
    border-style: solid;
    border-width: 6px;
    border-color: var(--agile-integrate-modal-color);
    position: fixed;
    background-color: #fefefe;
    right: 0;
    width: 50%;
    height: 100%;
    max-width: 1200px;
    box-shadow: 0px -4px 8px 0 rgb(255 255 255 / 80%), 0 6px 20px 0 rgb(255 0 0 / 23%);
    -webkit-animation-name: animateright;
    -webkit-animation-duration: 0.4s;
    animation-name: animateright;
    animation-duration: 0.4s;
}

@media (max-width: 768px) {
    #agile-integrate-modal {
        padding: 4px 0px;
    }
    .agile-integrate-modal-container { height: 95%; }
    .agile-mode-sidebar .agile-integrate-modal-container { width:94%; border-width:2px; }
    .agile-integrate-modal-body { width: 100%; height: calc(100% - 26px); padding: 0px; }
    .agile-integrate-modal-title { max-width: 80%; overflow: hidden; white-space: nowrap; }
    .agile-integrate-minical-icon .minical-container { top:unset; right: -15vw; }
}

@-webkit-keyframes animatetop {
    from { top: -300px;opacity: 0; }
    to { top: 0; opacity: 1; }
}

@keyframes animatetop {
    from { top: -300px; opacity: 0; }
    to { top: 0; opacity: 1; }
}

@-webkit-keyframes animateright {
    from { right: -300px;opacity: 0; }
    to { right: 0; opacity: 1; }
}

@keyframes animateright {
    from { right: -300px; opacity: 0; }
    to { right: 0; opacity: 1; }
}