/**
Theme Name: Astra Child
Author: JP - Godigital
Author URI: https://godigitalmarketing.ae/
Description: Just a child theme.
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

ul{
    margin: auto;
}
option:disabled {
    background: #ebebebcc;
}
#template-page {
    position: relative;
    flex: 1;
}

#template-page.horizontal {
    margin: auto;
    margin-top: 70px;
    padding: 15px 15px 65px 15px;
}

.btn-meta {
    background-color: #e33e41;
    color: #fff;
}

.text-divider {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 30px 0;
}
.text-divider span {
    background: #fff;
    display: block;
    z-index: 1;
    padding: 0 10px;
    font-size: 18px;
}
.text-divider::after{
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    background: #a9a9a9;
}

.box {
    width: 300px;
    height: 300px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

.wave {
    opacity: .4;
    position: absolute;
    top: calc(-100% - 200px);
    left: -94px;
    background: #e33e41;
    width: 700px;
    height: 700px;
    border-radius: 43%;
    animation: drift 10s infinite linear;
}

.wave.-three {
    animation: drift 12s linear;
}

.wave.-two {
    animation: drift 15s infinite linear;
    opacity: .1;
    background: black;
}

.box::after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #ffe4e4, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}
@keyframes drift {
    from { transform:  rotate(0deg); }
    from { transform:  rotate(360deg); }
}

.error{
    border: 1px solid red !important;
}

.datepicker table {
    border: 0 !important;
}
.datepicker td, .datepicker th{
    color: #000;
    font-weight: bold;
    padding: 0;
    border-radius: 0;
}


/* LOADING SCREEN  */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff7a;
    z-index: 9999999999;
    display: none;
}
.screen.show {
    display: block;
}

.loader {
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot {
    position: relative;
    width: 15px;
    height: 15px;
    margin: 0 2px;
    display: inline-block;
}

.dot:first-child:before {
    animation-delay: 0ms;
}

.dot:first-child:after {
    animation-delay: 0ms;
}

.dot:last-child:before {
    animation-delay: 200ms;
}

.dot:last-child:after {
    animation-delay: 200ms;
}

.dot:before{
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    animation-name: dotHover;
    animation-duration: 900ms;
    animation-timing-function: cubic-bezier(.82,0,.26,1);
    animation-iteration-count: infinite;
    animation-delay: 100ms;
    background: #ff272b;
    border-radius: 100%;
}

.dot:after {
    content: "";
    position: absolute;
    z-index: -1;
    background: #000000;
    box-shadow: 0px 0px 1px white;
    opacity: .5;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: -2px;
    border-radius: 100%;
    animation-name: dotShadow;
    animation-duration: 900ms;
    animation-timing-function: cubic-bezier(.82,0,.26,1);
    animation-iteration-count: infinite;
    animation-delay: 100ms;
}

@keyframes dotShadow {
    0% {
        transform: scaleX(1);
    }
    50% {
        opacity: 0;
        transform: scaleX(.6);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes dotHover {
    0% {
        top: 0px;
    }
    50% {
        top: -50px;
        transform: scale(1.1);
    }
    100% {
        top: 0;
    }
}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider.error {
    background: red;
}


.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    left: 21px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


#toast-container{
    z-index: 99999999999 !important;
}
.swal2-container {
    z-index: 999999 !important;
}
.swal2-container.swal2-backdrop-show{
    background: #00000026 !important;
}
.offcanvas,
.modal {
    z-index: 99999;
}
.modal {
    background: #00000026;
}
.auth-page,
.joborder-page {
    background-image: url(./assets/images/auth-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.joborder-banner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-bottom-right-radius: 150px;
    display: flex;
    flex-direction: column;
    padding: 50px;
    background: rgb(250,149,151);
    background: linear-gradient(180deg, rgba(255,196,197,1) 0%, rgba(227,62,65,1) 69%, rgba(173,23,26,1) 100%);
}



.auth-banner {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-bottom-right-radius: 150px;
    background-image: url(./assets/images/auth-left-image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.auth-field-header {
    position: relative;
    padding: 30px 0;
}

.auth-logo {
    position: relative;
    z-index: 2;
}
.auth-field-header .box {
    position: absolute;
    top: 0;
    width: 100%;
}
.auth-field {
    padding: 60px 80px;
    position: relative;
    z-index: 2;
}





body.logged-in.admin-bar .left-side-menu {
    padding-top: 52px;
}

#side-menu li{
    width: 100%;
}
#side-menu li a:hover{
    color: #7d64fd;
    background: #f2efff;
}
#side-menu li a.active{
    color: #7d64fd;
    background: #f2efff;
}

.formelementcontainer,
.emailtemplatecontainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.formelementheader,
.formemailheader,
.formbadgeheader {
    height: 48px;
    background: #fff;
}

.formelementbody,
.formemailbody,
.formbadgebody {
    height: calc(100% - 48px);
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.formelementaside {
    width: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.formelementbox {
    flex: 1;
    overflow: auto;
}
.formemailelements,
.formbagdeswidget {
    width: 250px;
    height: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

a#delfield:hover {
    background: #ff5b5b;
    color: #fff;
}

.formelementmain {
    flex: 1;
    background: #dddddd;
    overflow: auto;
    padding-bottom: 100px;
}

.formcontainer {
    width: 700px;
    margin: auto;
}

.formappendcontainer {
    min-height: 100px;
    position: relative;
}

.formappendoverlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.formappendcontainer.append .formappendoverlay {
    display: none;
}

.formelementnavigation {
    width: 230px;
    height: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.navigatorbody {
    flex: 1;
    overflow: auto;
}

.navigatorbox {
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    background-color: #fff;
}

.navigatorbox.active,
.navigatorbox:hover{
    background: #297b2e;
    color: #fff;
}
.element-box-group.inline {
    display: flex;
}
.element-box-group.inline .element-box-options {
    margin-right: 15px;
}

.formemailaside{
    width: 450px;
    overflow: auto;
    background-color: #fff;
    padding: 40px;
    padding-bottom: 200px;
}
.formemailmain{
    flex: 1;
    background: #dddddd;
    overflow: auto;
}
#properties {
    min-height: 180px;
}
.badges-field {
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.badges-field:hover {
    background: #3099b1;
    color: #fff;
}
.formbadgemain{
    flex: 1;
    background: #dddddd;
    overflow: auto;
    padding: 50px;
}
.formbadgesaside{
    width: 300px;
    overflow: auto;
    background-color: #fff;
}
.formbadgesproperties-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.formbadgesitems-container {
    flex: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.formbadgesproperties {
    flex: 1;
    overflow: auto;
}
.badgeholder {
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
}
.sourceholder{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.sourceholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    pointer-events: none;
}
.fieldholder{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.badge-widget {
    position: absolute;
    z-index: 2;
    cursor: pointer;
}
.badge-widget.active {
    box-shadow: 0 0 8px #34c5ff;
}
.badge-widget span {
    color: #000;
}

.badge-widget.resizable.qrcode,
.badge-widget.resizable.avatar{
    width: 200px;
    height: 200px;
    background-color: #d7d7d7;
    border: 2px dashed #000;
    box-sizing: border-box;
}
.badge-widget.resizable.qrcode::before,
.badge-widget.resizable.avatar::before {
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.badge-widget.resizable.qrcode::before {
    background-image: url(./assets/images/qrcode.png);
}
.badge-widget.resizable.avatar::before {
    background-image: url(./assets/images/avatar.png);
}
.badge-widget.resizable.text{

}
.badge-widget.resizable .resizer{
    width: 15px;
    height: 15px;
    background-color: #000000;
    position: absolute;
    bottom: -2px;
    right: -2px;
    cursor: se-resize;
    z-index: 3;
}
.badgeitem{
    background-color: #fff;
    cursor: pointer;
}
.badgeitem.active{
    background-color: #297b2e;
    color: #fff;
}

/* ======================= FORCE CSS ====================== */
table.table tr td.wrap {
    width: 1px;
    white-space: nowrap;
}
table.table-hover thead tr:hover>* {
    --ct-table-accent-bg: none;
}
.table-appevents tbody {
    display: flex;
    flex-wrap: wrap;
    border: 0 !important;
}
.table-appevents tbody tr {
    flex: 0 0 20%;
    width: 20%;
    border: 0 !important;

}
.table-appevents tbody td {
    width: 100%;
    display: block;
    border: 0 !important;

}

.table-appevents .app-banner {
    width: 100%;
    height: 300px;
}
.table-appevents .app-banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.wme{
    width: 700px;
}
.dropdown-static {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: inline !important;
    border: 0 !important;
}
.dropdown-container {
    box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    min-width: 10rem;
    padding: .5rem 0;
    background: #fff;
    border-radius: .25rem;
    display: none;
}

.dropdown-container.show {
    display: block;
}

.registration-wrapper {
    max-width: 850px;
    margin: auto;
}

.splide.formelement{
    transition: height .3s ease-in-out;
    overflow: hidden;
}
.splide.formelement .splide__slide{
    opacity: 1;
    transition: opacity .3s ease-in;
}
.splide.formelement .splide__slide:not(.is-active) {
    opacity: 0;
}

.registration-step-container {
    padding: 20px 0;
    max-width: 850px;
    width: 100%;
}
.registration-step-indicator {
    display: flex;
}
.step-indicator {
    width: 80px;
    height: 5px;
    background: #d5d5d5;
    margin-right: 5px;
    position: relative;
}
.step-indicator:before {
    content: '';
    position: absolute;
    width: 0%;
    height: 100%;
    background: #49d189;
}
.step-indicator.active:before {
    animation: wave 2s ease-in-out -1s infinite;
}
.step-indicator.done:before {
    width: 100%;
    animation: none;
}
@keyframes wave{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}


.reg-admission-items {
    padding: 15px;
    background: #e5f3fd;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}

.reg-admission-items:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #71b6f9;
}

.reg-admission-selected {
    width: 35px;
    height: 35px;
    background: #4d4d4d;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.reg-admission-items.selected:before {
    background: #49d189;
    transition: all .3s ease-in-out;
}
.reg-admission-items.selected .reg-admission-selected {
    background: #49d189;
    transition: all .3s ease-in-out;
}

.empty-admission-item {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.fc-event{
    margin: 0 !important;
    height: 100%;
}
.fc-event-time, .fc-event-title{
    color: inherit;
}

.dropzone-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.dropzone-box {
    display: flex;
    width: 100%;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px dashed #ced4da;
    padding: 20px;
    border-radius: 6px;
    cursor: pointer;
}


.upload-avatar {
    width: 220px;
    height: 220px;
    position: relative;
}
.upload-avatar .dropzone-box{
    height: 100%;
}
.upload-avatar .preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: none;
}

.upload-avatar .preview-container.uploaded {
    display: block;
}
.upload-avatar .preview-container > div {
    border: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.upload-avatar .col-attachment {
    flex: 100%;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}
.upload-avatar .col-attachment > div {
    width: 100%;
    height: 100%;
}
.upload-avatar .col-attachment > div img {
    width: 100%;
    height: 100%;
}
.upload-avatar .preview-container h5 {
    display: none;
}
.upload-avatar .preview-container .col-text span{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.upload-avatar span#removeitem {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 100%;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 22px;
    text-shadow: 
    -1px -1px 0 #555555, 
     1px -1px 0 #555555, 
    -1px  1px 0 #555555, 
     1px  1px 0 #555555; 
}
.upload-avatar span#removeitem:hover {
    background: #fff;
    color: #000;
}

.upload-emailbanner h3,
.upload-attachment h3 {
    font-size: 18px;
}
.upload-emailbanner h5,
.upload-attachment h5 {
    font-size: 12px;
}
.upload-emailbanner .dropzone-box {
    height: 180px;

}
.upload-attachment .dropzone-box {
    height: 130px;
}
.upload-attachment #fileitem {
    background: #e1faff;
}

.upload-logo {
    width: 180px;
    height: 180px;
}
.upload-logo .dropzone-box,
.upload-banner .dropzone-box {
    width: 100%;
    height: 100%;
}
.upload-logo h1{
    font-size: 18px;
}
.upload-logo h3{
    font-size: 12px;
}
.upload-logo h5{
    font-size: 11px;
}

.upload-banner {
    width: 450px;
    height: 200px;
}
  

.medialibrary.single .preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: none;
}
.medialibrary.single.uploaded .preview-container {
    display: block;
}
.medialibrary.single .preview-container > div {
    border: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.medialibrary.single .col-attachment {
    flex: 100%;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}
.medialibrary.single .col-attachment > div {
    width: 100%;
    height: 100%;
}
.medialibrary.single .col-attachment > div img {
    width: 100%;
    height: 100%;
}
.medialibrary.single .preview-container h5 {
    display: none;
}
.medialibrary.single .preview-container .col-text span{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.medialibrary.single span#removeitem {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 100%;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 22px;
    text-shadow: 
    -1px -1px 0 #555555, 
     1px -1px 0 #555555, 
    -1px  1px 0 #555555, 
     1px  1px 0 #555555; 
}
.medialibrary.single span#removeitem:hover {
    background: #fff;
    color: #000;
}

.note-modal-footer {
    height: 100%;
    overflow: hidden;
}
  

.paymentmethod-aside {
    width: 300px;
}

.sendemail-gif {
    width: 150px;
    height: 150px;
    margin: auto;
    background-image: url(./assets/images/sendemail.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.booking-container {
    max-width: 700px;
    width: 100%;
    margin: auto;
    padding: 15px;
}

.agenda-container {
    display: flex;
    height: 600px;
}

.agenda-section {
    width: 300px;
    padding: 20px;
}
.agenda-tables {
    flex: 1;
    height: 100%;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
}
.agenda-table {
    flex: 1;
    overflow: auto;
}
.agenda-selected {
    width: 300px;
    height: 100%;
    overflow: auto;
}