/* ************************************ Global ************************************ */
body {
    overflow-x: hidden;
}

a {
    color: #000;
}

.tx-ar {
    border: 1px solid #dddddd;
    outline: 0;
}

@keyframes shake {
    0% {
        -webkit-transform: translate(10px);
    }

    20% {
        -webkit-transform: translate(0px);
    }

    40% {
        -webkit-transform: translate(10px);
    }

    60% {
        -webkit-transform: translate(0px);
    }

    80% {
        -webkit-transform: translate(10px);
    }

    100% {
        -webkit-transform: translate(0px);
    }
}

.prErrMsg {
    color: #f00;
    padding-top: 8px;
    font-size: 15px;
}

.prErrMsg.ErrActive {
    animation: shake .9s;
}

.product-container,
.slot-container {
    display: none;
}

.single-product:hover,
.single-topic:hover {
    border: 2px solid rgb(5 153 72);
}

.single-product:hover .me-products.iam-ico {
    transform: translateY(-3px);
}

.single-solution.l-active,
.single-product.l-active,
.single-slot.l-active,
.single-topic.l-active,
.single-solution:hover,
li.single-slot:hover {
    border: 2px solid rgb(5 153 72);
}

.ap-menu-sec ul {
    padding: 20px 0;
}

h3 {
    font-size: 1.3em;
    font-family: 'Zoho_Puvi', sans-serif;
}

:root {
    --height: 120px;
    --selectedContentWidth: 32%;
    --sidebarWidth: 0%;
    --mainContentWidth: calc(100vw - (var(--selectedContentWidth)) - (var(--sidebarWidth)));
    --overlayWidth: calc(100% - (var(--selectedContentWidth)))
}

.zsiq_floatmain.zsiq_theme1.siq_bR {
    display: none !important;
}

/* PRELOADER CSS */
.loading {
    position: fixed;
    z-index: 999;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(39 39 39 / 34%);
}

.loading:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 50px;
    height: 50px;
    margin-top: -0.5em;
    border: 5px solid rgba(33, 150, 243, 1.0);
    border-radius: 100%;
    border-bottom-color: transparent;
    -webkit-animation: spinnerAnimation 1s linear 0s infinite;
    animation: spinnerAnimation 1s linear 0s infinite;
}

/* spinnerAnimation ANIMATION */
@-webkit-keyframes spinnerAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinnerAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinnerAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinnerAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*-----------Solutions icons-------------*/
.access-management-and-identity-security>.me-solution.iam-ico,
.access-management-and-identity-security>.me-solution-selected.iam-ico,
.ide-acc-man>.me-solution.iam-ico,
.ide-acc-man>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-access-man-iden-sec.svg") 0 center no-repeat;
}

.unified-service-management>.me-solution.iam-ico,
.unified-service-management>.me-solution-selected.iam-ico,
.uni-ser-mam>.me-solution.iam-ico,
.uni-ser-mam>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-unified-endpnt-man-1.svg") 0 center no-repeat;
}

.unified-endpoint-management>.me-solution.iam-ico,
.unified-endpoint-management>.me-solution-selected.iam-ico,
.unified-endpoint-management-and-security>.me-solution.iam-ico,
.unified-endpoint-management-and-security>.me-solution-selected.iam-ico,
.uni-end-man-sec>.me-solution.iam-ico,
.uni-end-man-sec>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-unified-ser-man.svg") 0 center no-repeat;
}

.it-operations-management>.me-solution.iam-ico,
.it-operations-management>.me-solution-selected.iam-ico,
.it-ope-man>.me-solution.iam-ico,
.it-ope-man>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-it-operations-management.svg") 0 center no-repeat;
}

.security-information-and-event-management>.me-solution.iam-ico,
.security-information-and-event-management>.me-solution-selected.iam-ico,
.sec-inf-eve-man>.me-solution.iam-ico,
.sec-inf-eve-man>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-siem.svg") 0 center no-repeat;
}

.advanced-analytics>.me-solution.iam-ico,
.advanced-analytics>.me-solution-selected.iam-ico,
.adv-ana>.me-solution.iam-ico,
.adv-ana>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-adv-analytics.svg") 0 center no-repeat;
}

.it-management-for-msp > .me-solution.iam-ico{
    background: url("https://cdn.manageengine.com/images/msp-ico.svg") center no-repeat;
    background-size: 50px;
}

.zoho > .me-solution.iam-ico{
    background: url("../images/zoho-favicon.png") center no-repeat;
    background-size: 50px;
}

.low-code > .iam-ico.me-solution-selected{
    background: url("https://cdn.manageengine.com/images/lowcode-ico.svg") center no-repeat;
    background-size: 40px;
}

.appcreator>.me-solution.iam-ico,
.appcreator>.me-solution-selected.iam-ico,
.low-code-app-development>.me-solution.iam-ico,
.low-code-app-development>.me-solution-selected.iam-ico,
.low-cod-app-dev>.me-solution.iam-ico,
.low-cod-app-dev>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-low-code-app.svg") 0 center no-repeat;
}

.site24x7>.me-solution.iam-ico,
.site24x7>.me-solution-selected.iam-ico, 
.sit-24x7>.me-solution.iam-ico,
.sit-24x7>.me-solution-selected.iam-ico {
    background: url("../images/me-prd-site24x7.svg") 0 center no-repeat;
}

.it-operations-management-from-cloud>.me-solution.iam-ico,
.it-operations-management-from-cloud>.me-solution-selected.iam-ico {
    background: url("../images/me-prd-site24x7.svg") 0 center no-repeat;
}

.msp-solutions>.me-solution.iam-ico,
.msp-solutions>.me-solution-selected.iam-ico, 
.it-management-for-msps>.me-solution.iam-ico,
.it-management-for-msps>.me-solution-selected.iam-ico,
.it-man-for-msp>.me-solution.iam-ico,
.it-man-for-msp>.me-solution-selected.iam-ico {
    background: url("../images/me-sol-msp-sol.svg") 0 center no-repeat;
}

.product-content li.single-product.ad-360 {
    display: inline-block !important;
}

/*-------------products icon-------------*/
.access-manager-plus>.me-products.iam-ico {
    background-position: -38px -54px;
}

.ad-360>.me-products.iam-ico {
    background-position: -175px -10px;
}

.admanager-plus>.me-products.iam-ico {
    background-position: -3px -10px;
}

.adselfservice-plus>.me-products.iam-ico {
    background-position: -72px -10px;
    width: 25px!important;
}

.exchange-reporter-plus>.me-products.iam-ico {
    background-position: -104px -10px;
}

.identity-manager-plus,.identity360>.me-products.iam-ico {
    background-position: -212px -10px;
}

.key-manager-plus>.me-products.iam-ico {
    background-position: -73px -54px;
    width: 24px!important;
}

.m365-manager-plus>.me-products.iam-ico {
    background-position: -246px -10px;
}

.pam-360>.me-products.iam-ico {
    background-position: -176px -10px;
}

.password-manager-pro>.me-products.iam-ico {
    background-position: -3px -54px;
}

.recoverymanager-plus>.me-products.iam-ico {
    background-position: -140px -10px;
}

.analytics-plus>.me-products.iam-ico {
    background-position: -211px -184px;
}

.applications-manager>.me-products.iam-ico {
    background-position: -105px -141px;
}

.firewall-analyzer >.me-products.iam-ico {
    background-position: -247px -97px;
}

.netflow-analyzer>.me-products.iam-ico {
    background-position:  -247px -140px;
}

.network-configuration-manager>.me-products.iam-ico {
    background-position: -282px -140px;
}

.opmanager-plus>.me-products.iam-ico {
    background-position: -38px -184px;
}

.oputils>.me-products.iam-ico {
    background-position: -109px -184px;
    width: 25px !important;
}

.alarmsone > .me-products.iam-ico {
    background-position: -70px -141px;
}

.rmm-central>.me-products.iam-ico {
    background-position: -140px -228px;
}

.servicedesk-plus-msp>.me-products.iam-ico {
    background-position: -103px -54px;
}

.pam360-msp>.me-products.iam-ico, .pam360>.me-products.iam-ico{
    background-position: -281px -10px;
}

.password-manager-pro-msp>.me-products.iam-ico {
    background-position: -3px -54px;
}

.endpoint-central-msp>.me-products.iam-ico {
    background-position:-210px -54px;
}

.mobile-device-manager-plus-msp>.me-products.iam-ico {
     background-position: -5px -98px;
}

.opmanager-msp>.me-products.iam-ico,.opmanager>.me-products.iam-ico {
    background-position: -4px -184px;
}

.site24x7-msp>.me-products.iam-ico {
    background-position: -141px -184px;
}

.admanager-plus-msp>.me-products.iam-ico {
    background-position: -3px -10px;
}

.adaudit-plus>.me-products.iam-ico {
    background-position: -38px -10px;
}

.datasecurity-plus>.me-products.iam-ico {
    background-position: -141px -98px;
}

.eventlog-analyzer>.me-products.iam-ico,.eventlog-analyzer-mssp>.me-products.iam-ico {
    background-position: -176px -98px;
}

.fileanalysis>.me-products.iam-ico {
    background-position: -211px -98px;
}

.log360>.me-products.iam-ico,.log360-mssp>.me-products.iam-ico {
    background-position: -281px -98px;
}

.m365-security-plus>.me-products.iam-ico {
    background-position: -4px -142px;
}

.sharepoint-manager-plus>.me-products.iam-ico {
    background-position: -37px -142px;
}

.zoho-products > .me-products.iam-ico{
    background: url("../images/zoho-favicon.png") center no-repeat;
    background-size: contain;
} 

.cloud-security-plus>.me-products.iam-ico {
    background-position: -105px -97px;
}

.site24x7>.me-products.iam-ico {
    background-position: -141px -184px;
}

.msp-central > .me-products.iam-ico{
    background-position: -277px -228px;
}

.site24x7-cloudspend>.me-products.iam-ico {
    /* background: url("../images/me-prd-site24x7.svg") 0 center no-repeat; */
}

.site24x7-statusiq>.me-products.iam-ico {
    background-position: -177px -184px;
}

.application-control-plus>.me-products.iam-ico {
    background-position: -246px -54px;
}

.browser-security-plus>.me-products.iam-ico {
    background-position: -283px -54px;
}

.endpoint-central>.me-products.iam-ico {
    background-position:-210px -54px;
}

.dex-manager-plus > .me-products.iam-ico {
  background-position: -4px -272px;
}

.device-control-plus>.me-products.iam-ico {
    background-position: -107px -228px;
    width: 25px!important;
}

.endpoint-dlp-plus>.me-products.iam-ico {
    background-position: -73px -229px;
}

.ransomware-protection-plus>.me-products.iam-ico{
    background-position: -206px -228px;
}

.malware-protection-plus>.me-products.iam-ico{
    background-position: -173px -228px;
}

.mobile-device-manager-plus>.me-products.iam-ico {
    background-position: -5px -98px;
}

.os-deployer>.me-products.iam-ico {
    background-position: -40px -229px;
}

.patch-connect-plus>.me-products.iam-ico {
    background-position: -240px -228px;
}

.patch-manager-plus>.me-products.iam-ico {
    background-position:  -5px -228px;
}

.remote-access-plus>.me-products.iam-ico {
    background-position: -40px -98px ;
}

.vulnerability-manager-plus>.me-products.iam-ico {
    background-position: -74px -98px;
    width: 25px !important;
}

.assetexplorer>.me-products.iam-ico {
    background-position: -174px -54px;
}

.servicedesk-plus>.me-products.iam-ico {
    background-position: -103px -54px;
}
    
.cloudspend>.me-products.iam-ico{
    background-position: -73px -184px;
}
.cloudspend-msp>.me-products.iam-ico{
    background-position: -73px -184px;
}
.saas-manager-plus > .me-products.iam-ico{
    background-position: -249px -184px;
    
}


.clouddns>.me-products.iam-ico{
    background-position: -141px -141px;
}
.ddi-central>.me-products.iam-ico{
    background-position: -176px -141px;
}
.digital-risk-analyzer > .me-products.iam-ico{
    background-position: -210px -141px;
}

.servicedesk-plus-cloud>.me-products.iam-ico {
    background-position: -103px -54px;
}

.supportcenter-plus>.me-products.iam-ico {
    background-position: -138px -54px;
}

.low-code > .me-solution.iam-ico {
    width:42px !important;
   background: url("https://cdn.manageengine.com/images/lowcode-ico.svg") 0 no-repeat;
}

.appcreator>.me-products.iam-ico {
    background-position:-285px -183px ;
    /* background: url("../images/me-prd-app-crtor.svg") 0 center no-repeat; */
}

/*----------*/
/* *********************************** Solution ************************************ */

.single-solution.l-active:before,
.single-slot.l-active:before {
    float: right;
    content: "";
    /* background: url("../images/selection-icon.png") 0 center no-repeat; */
    background: url("../images/correct.png") 0 center no-repeat;
    width: 28px;
    height: 28px;
    background-size: contain;
}

.single-solution.l-active:before {
    margin-top: 5px;
    margin-right: 10px;
}

.single-slot.l-active:before {
    /* margin-left: 80px; */
    margin-top: -5px;
    margin-left: -30px;
}

.single-product.l-active .me-products.iam-ico {
    display: none;
}

.single-product.l-active .prod-select-ckmr:before {
    content: "";
    background: url("../images/selection-icon.png") 0 center no-repeat;
    background-size: auto;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    padding: 0 15px 0 0;
    display: inline-block;
    background-size: contain;
}

.selct-reasn p {
    font-size: 1em;
}

.selct-reasn p:nth-child(1):before {
    content: '';
    background: url("../images/tick-black.png") 0 center no-repeat;
    opacity: 0.7;
    width: 23px;
    height: 23px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px 0 0;
}

@keyframes zoomin {
    0% {
        width: 0;
        height: 0;
    }

    100% {
        width: 28px;
        height: 28px;
    }
}

.single-topic.l-active h5:before {
    content: "";
    background: url("../images/selection-icon.png") 0 center no-repeat;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    padding: 0 10px 0 0;
    display: inline-block;
    background-size: contain;
    animation: zoomin .8s;
}


/* *********************************** Left container css *********************************** */

.ap-menu-sec {
    display: inline-block;
    float: left;
    width: var(--sidebarWidth);
    background: #275493;
}

.ap-menu-cnt-sec {
    display: inline-block;
    float: left;
    /* width: 90%;*/
    width: calc(100% - var(--sidebarWidth));

}

.nav.nav-pills {
    text-align: center;
}

.nav.nav-pills li {
    margin-bottom: 25%;
}

.nav.nav-pills li a {
    color: #ffffff;
    opacity: .5;
    font-family: 'Zoho_Puvi_SemiBold', sans-serif;
    font-size: 0.9em;
}

.circle {
    width: 24px;
    height: 24px;
    margin: 12px auto;
    display: block;
    opacity: .5;
}

li.active .circle,
.nav.nav-pills li.active a {
    opacity: 1;
}

/* *********************************** Center content css ************************************ * */
.main-wrapper {
    display: flex;
    height: 100vh;
    background: #f4f4f4;
}

.main-content {
    background: #f4f4f4;
    width: 68%;
    height: 100vh;
    /* overflow: scroll; */
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 82%;
    padding: 0 30px;
}

.solution-container {
    margin-top: 25px;
    margin-bottom: 20px;
}

.nosolution {
    font-size: 1.5em;
    text-align: center;
    display: block !important;
    margin: 10% 0 5% 0;
}

.selected-content {
    background: #fbeaa9;
    width: var(--selectedContentWidth);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.ap-menu-sec,
.ap-menu-cnt-sec,
.ap-menu-cnt-sec .tab-content {
    height: 100vh;
}

.content-heading,
.prod-cont-heading {
    padding: 10px 0;
    border-bottom: 2px solid #dfdfdf;
}

.solution-content {
    padding: 10px 0 0 0px;
    display: flex;
    flex-wrap: wrap;
}

.sol-ttl {
    padding: 0 5px;
}

.sol-ttl h5 {
    line-height: 22px;
}

.me-solution.iam-ico {
    display: block;
    background: url("../images/me-sol-access-man-iden-sec.svg") 0 center no-repeat;
    width: 62px;
    height: 62px;
    margin: 0 auto;
}


.single-solution {
    width: 100%;
    background: #FFFFFF;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #dfdfdf;
    cursor: pointer;
    vertical-align: top;
    min-height: 130px;
    transition: .2s;
    /* padding: 25px 5px; */
    padding: 5px 0px;

}

/* *********************************** Right panel CSS *********************************** */
.me-solution-selected.iam-ico {
    display: block;
    background: url("https://www.manageengine.com/images/mesolutions-ico.svg") no-repeat;
    background-size: 400px;
    width: 48px;
    height: 48px;
    /*    background-position: -41px 0;*/
    background-position: -35px 8px;
    /*    padding-right: 10px;*/
}

.selct-head {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.selct-head.active .drp-arw-icn.open {
    transform: rotate(180deg);
}

.drp-arw-icn {
    margin-left: auto;
}

.drp-arw-icn img {
    width: 16px;
    height: 16px;
}

.drp-arw-icn.open {
    transform: rotate(0deg);
    transition: all 0.75s 0.25s;
}

.selected-content>div>ul {
    min-height: calc(100vh - var(--height));
    /* overflow: scroll; */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 40px 0 40px;
    height: calc(100vh - var(--height));
}

.selected-content>div>ul>li {
    background: #FFFFFF;
    padding: 15px;
    border-radius: 9px;
    margin-bottom: 10px;
}

/*
 .selct-prod {
display: none;
} 
*/
.selct-prod>ul>li:nth-child(1) {
    padding-top: 12px;
}

.selct-prod>ul>li {
    padding: 0px 0px 10px 28px;
    font-size: 13px;
    display: flex;
}

.selct-prod>ul>li .remove-product {
    background: url("../images/close-icon.png") 0 center no-repeat;
    cursor: pointer;
}

.selct-prod>ul>li .remove-product,
.selct-prod>ul>li .remove-product-disable {
    width: 20px;
    height: 20px;
    visibility: hidden;
    /* background: url("../images/close-icon.png") 0 center no-repeat; */
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;

}

.selct-prod>ul>li p {
    display: inline-block;
}

.selct-prod>ul>li:hover span {
    visibility: visible;
    transition: all .2s ease-in;
}

.selct-prod .me-products.iam-ico {
    width: 25px;
    height: 27px;

}

.selct-time p {
    font-size: 1em;
    padding: 10px 0 10px 63px;
}

.selct-reasn p:nth-child(1) {
    padding: 10px 0 10px 63px;
    border-top: 1px solid #dddddd;
}

.selct-time p:nth-child(1) {
    padding: 10px 0 0px 63px;
    border-top: 1px solid #dddddd;
}

.othr-resn-tp {
    border: 0;
    padding: 0 0 5px 63px;
    word-wrap: break-word;
}

/* ********* */

.product-container,
.slot-container {
    margin-top: 25px;
    background: #ffffff;
    height: auto;
    padding: 25px;
    border-radius: 10px;
    border: 2px solid #f6db78;
}

.prod-cont-heading {
    display: flex;
}

.prod-cont-heading>.btn-close {
    margin-left: auto;
    cursor: pointer;
    width: 28px;
    height: 28px;
    background: url("../images/close-icon-black.png") 0 center no-repeat;
    background-size: cover;
    transition: .2s;
}

.single-product {
    display: inline-block;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    vertical-align: top;
    height: 28px;
    border: 2px solid #dfdfdf;
    margin: 10px 10px 0 0;
    transition: .2s;
}

.single-topic {
    display: inline-block;
    align-items: center;
    background: #ffffff;
    border: 2px solid #dfdfdf;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    margin: 10px 10px 10px 0;
    vertical-align: top;
    height: 27px;
    padding: 8px 10px;
    line-height: 21px;
}

.product-content {
    padding: 0px 0 30px 0;
}

.me-products.iam-ico {
    display: inline-block;
    background: url("https://www.manageengine.com/images/new-prod-sprite.svg") 0 / 325px no-repeat;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    padding: 0 15px 0 0;
    transition: .5s;
}

.prod-ttl {
    display: inline-block;
    vertical-align: middle;
}

.prod-ttl h5 {
    display: flex;
    align-items: center;
}

.product-footer {
    text-align: center;
    margin: 0;
    /* position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%); */
}

.btn-next {
    background: #f00;
    padding: 12px 40px;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Zoho_Puvi_SemiBold', sans-serif;
    font-size: 1.1em;
    text-transform: uppercase;
    display: inline-block;
    transition: .2s;
    border: 1px solid #f00;
}

.btn-next:hover {
    background: transparent;
    color: #000;
}

.tx-ar {
    border: 2px solid #dfdfdf;
    transition: .2s;
    width: 80%;
    height: 75px;
    padding: 10px;
}

.other-reason .tx-ar {
    border: 2px solid rgb(5 153 72);
}

.selct-head h5 {
    padding-left: 10px;
}

/* ****** */

ul.date-content {
    display: flex;
    justify-content: center;
    text-align: center;
}

.single-date {
    background: #ffffff;
    margin: 10px 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #d8d6d6;
    cursor: pointer;
    transition: .2s;
    width: 140px;
}

.single-date.l-active,
.single-date:hover {
    background: #265391;
    color: #FFFFFF;
}

.l-day {
    font-weight: bold;
    font-size: 1.3em;
}

.l-date {
    font-size: 1.2em;
    font-weight: bold;
}

.l-time {
    font-size: 12px;
}

li.single-slot {
    background: #ffffff;
    text-align: center;
    padding: 10px 10px;
    border-radius: 5px;
    border: 2px solid #dddddd;
    width: 21%;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin: 6px 8px;
    min-height: 90px;
    position: relative;
    transition: .2s;
}

.single-slot.active-disabled {
    border: 2px solid rgb(5 153 72);
    pointer-events: none;
}

li.single-slot.l-disabled {
    pointer-events: none;
    background: #eeeeee;
}


.slot-timing-container {
    padding: 0px 10%;
    margin: auto;
    text-align: center;
    margin: 0 0 20px;
}

.selected-content-footer {
    text-align: center;
    background: #f8c711;
    padding: 15px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.selct-time p:nth-child(1):before {
    content: '';
    background: url("../images/date-icon-black.png") 0 center no-repeat;
    opacity: 0.7;
    width: 23px;
    height: 23px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px 0 0;
}

.selct-time p:nth-child(2):before {
    content: '';
    background: url("../images/time-icon-black.png") 0 center no-repeat;
    opacity: 0.7;
    width: 23px;
    height: 23px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px 0 0;
}

.it-management-for-msp > .me-solution-selected.iam-ico {
   background: url("https://cdn.manageengine.com/images/msp-ico.svg") center no-repeat;
   width: 36px;
}
.zoho > .me-solution-selected.iam-ico {
    background: url("../images/zoho-favicon.png") center no-repeat;
    background-size: 36px;
}

/*-----------Animation styles-------------*/
.btn-close:hover {
    animation: rotate 1s;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* User form  */
.usr-fm-wrapperAlert {
    position: fixed;
    z-index: 990;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(39 39 39 / 34%);
}

/* Booking success */
.wrapperAlert {
    position: fixed;
    z-index: 990;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(39 39 39 / 34%);
}

.contentAlert {
    width: 450px;
    background: #ffffff;
    text-align: center;
    margin: auto;
    margin-top: 5%;
    padding: 10px 5px 20px 5px;
    border-radius: 10px;
    position: relative;
}

.alert-image>img {
    width: 80px;
    height: 80px;
}

.contentAlert>p {
    padding-top: 10px;
    font-size: 1.2em;
    text-align: center;
}

.contentAlert.success {
    border: 1.5px solid #01c070;
}

.contentAlert.info {
    border: 1.5px solid #0094d9;
}

.contentAlert.warning {
    border: 1.5px solid #e65251;
}

.alert-button {
    margin-left: auto;
    cursor: pointer;
    width: 28px;
    height: 28px;
    background: url(../images/close-icon-black.png) 0 center no-repeat;
    background-size: cover;
    transition: .2s;
    display: block;
    position: absolute;
    right: 7px;
}

.alert-button:hover {
    animation: rotate 1s;
}

.single-solution.l-active+.solution-edit-section {
    background: #eeeeee;
    z-index: 2;
    text-align: center;
    width: 100%;
    border-right: 2px solid #059948;
    border-left: 2px solid #059948;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    bottom: 2px;
}

.single-solution.l-active+.solution-edit-section a {
    display: inline-block;
    margin: 7px 0;
    padding: 0 10px;
    cursor: pointer;
}

.single-solution.l-active+.solution-edit-section a:hover {
    color: #0011ff;
}

.single-solution.l-active+.solution-edit-section a:first-child {
    border-right: 1px solid #333333;
}

.solution-content li {
    /* width: 28%; */
    width: 20%;
    margin: 10px 15px;
    position: relative;
    /* padding: 0 5px; */
}

ul.alert-info-list {
    text-align: left;
    padding: 5px;
    line-height: 1.6;
    list-style-type: decimal;
    font-size: 1.1em;
}

.alert-info-list li {
    display: list-item;
    list-style-position: inside;
}

.alert-info-list-head {
    text-align: left;
    font-weight: bold;
    padding-left: 5px;
}

/****** Notification Message CSS start ******/

.notification-section {
    position: relative;
}

.notification-message {
    /* width is same as .main-content width adjust based on that */
    position: fixed;
    text-align: center;
    width: 68%;
    top: 30%;
    transform: translateY(-30%);
    z-index: 10;
}

.notification-message p {
    background: #3866a7;
    padding: 15px;
    width: 50%;
    margin: 0 auto;
    border-radius: 6px;
    color: #ffffff;
}

.notification-message p.added {
    background: #3866a7;
    color: #ffffff;
}

.notification-message p.error {
    background: #f9e4d3;
    color: #333333;
}

/* **** */
.solution-container {
    position: absolute;
    z-index: 3;
    width: 67%;
}

.product-overlay,
.slot-overlay {
    background: rgba(21, 17, 17, 0.61);
    position: absolute;
    z-index: 4;
    width: var(--overlayWidth);
    left: 8px;
    height: 100vh;
    border-radius: 6px;
    overflow-y: scroll;
}

.product-overlay {
    transition: all 0.3s ease-in-out 0s;
    transform: scale(0.3);
    -moz-transform: scale(0.3);
    -o-transform: scale(0.3);
    -webkit-transform: scale(0.3);
}

.slot-overlay {
    transition: all 0.3s ease-in-out 0s;
}

.product-overlay.active, .slot-overlay {
    transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
}

.product-overlay.deactive, .slot-overlay.deactive {
    transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
}

.product-container,
.slot-container {
    width: 80%;
    margin: auto;
    margin-top: 2%;
}

.single-solution.l-active.sl-registered {
    background: #c4dac4;
}

.alert-btn {
    padding: 7px 15px;
    background: #e65251;
    color: #ffffff;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #E65255;
    transition: .2s;
    cursor: pointer;
}

.alert-btn:hover, .alert-btn-cls:hover {
    background: transparent;
    color: #E65255;
}

.notify-reminder {
    padding-bottom: 10px;
}

.notify-checkbox {
    
}

.logout-user-form {
    width: 400px;
    background: white;
    margin: 0 auto;
    padding: 30px;
    margin-top: 5%;
    border-radius: 8px;
}

.row-d-flex {
    display: flex;
    padding: 10px 8px;
    align-items: center;
}

.row-otp-ttl {
    padding-bottom: 10px; 
    text-align: center;
}

.row-d-flex .col-25 {
    padding-left: 10px;
}

.row-d-flex .col-75 {
    padding-left: 20px;
    width: 100%;
}

.row-d-blck {
    display: block;
}

.row-d-blck .col-100 {
   padding-bottom: 10px;
}

.lg-usr-inpt {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.lg-usr-inpt:focus-visible {
    outline: 1px solid #D83544;
}

.lg-usr-submit {
    background-color: #D83544;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.row-center {
    text-align: center;
    margin-top: 10px;
    padding: 8px;
}

.fm-err-msg {
    display: none;
    font-size: 13px;
    color: #D83544;
}

.form-err {
    color: #D83544;
    text-align: center;
}
/* *********************************************** hide cookies button *********************************************** */

.zbottom-cookie-container-outer{
    display: none !important;
}

/* *********************************************** RESPONSIVE STARTS HERE *********************************************** */
@media screen and (max-width: 1400px) {
    .slot-timing-container {
        padding: 0;
    }
}

@media screen and (max-width: 1250px) {
    .selct-prod>ul>li {
        padding: 0px 0px 10px 10px;
    }

    .selected-content>div>ul {
        padding: 20px 20px 0 20px;
    }

    .solution-content li {
        width: 29%;
        padding: 0;
    }
}

@media screen and (max-width: 1200px) {
    li.single-slot {
        width: 30%;
    }
}

@media screen and (max-width: 1111px) {
    .solution-container {
        width: 60%;
    }

    .solution-content li {
        width: 30%;
        margin: 10px 5px;
    }

    .selct-prod>ul>li {
        padding: 0px 0px 10px 0px;
    }

    .selected-content {
        --selectedContentWidth: 40%;
    }

    .selct-reasn p:nth-child(1),
    .selct-time p,
    .selct-time p:nth-child(1) {
        padding: 10px 0 10px 35px;
    }
}

@media screen and (max-width: 1000px) {
    .solution-container {
        width: auto;
        position: relative;
    }

    .product-overlay,
    .slot-overlay {
        position: relative;
        transform: none;
        width: auto;
        height: auto;
        background: transparent;
        left: 0;
    }

    .main-content,
    .notification-message {
        max-width: 100%;
    }

    li.single-slot {
        width: 25%;
    }

    .ap-menu-sec {
        display: block;
        width: 100%;
        float: none;
        height: auto;
    }

    .nav.nav-pills li {
        margin-bottom: 0;
        display: inline-block;
        vertical-align: top;
        width: 32%;
    }

    .main-wrapper {
        display: block;
    }

    .ap-menu-cnt-sec {
        width: 100%;
        height: auto;
    }

    .ap-menu-sec,
    .ap-menu-cnt-sec,
    .ap-menu-cnt-sec .tab-content {
        height: auto;
    }

    .selected-content {
        width: 100%;
        height: auto;
    }

    li.single-slot {
        width: 30%;
    }

    .btn-next {
        margin-top: 15px;
        display: inline-block;
    }

    .content-heading,
    .prod-cont-heading {
        padding: 10px 0px 10px 0px;
    }

    .selected-content>div>ul {
        min-height: auto;
        height: auto;
        padding: 20px 20px 20px 20px;
    }

    .main-content {
        min-height: auto;
        height: auto;
        padding: 0;
    }

    .ap-menu-sec ul {
        padding: 8px 0;
    }

    .product-container,
    .slot-container,
    .solution-container {
        margin: 2%;
        padding: 20px;
        width: auto;
    }

    .main-content,
    .notification-message {
        width: 100%;
    }

    .circle {
        margin: 4px auto;
        width: 24px;
        height: 24px;
    }

    .selected-content-footer {
        position: relative;
    }

    .selct-prod>ul>li {
        padding: 0px 0px 10px 20px;
    }
}

@media screen and (max-width: 760px) {
    li.single-slot {
        width: 50%;
    }

    .solution-content li {
        width: 100%;
        margin: 20px 0 0 0;
    }

    .solution-content {
        text-align: center;
        padding: 0;
    }

    .selct-prod>ul>li {
        padding: 0px 0px 10px 10px;
    }

    .notification-message p {
        width: auto;
        margin: 0 10%;
        ;
    }

    .logout-user-form {
        width: auto;
        margin: 50px 10px 10px 10px;
    }
}


@media screen and (max-width: 470px) {
    .alert-image>img {
        width: 70px;
        height: 70px;
    }

    .contentAlert {
        width: 300px;
    }
}