@font-face 
{
  font-family: 'Poppins-Regular';
  src: url('../fonts/Poppins-Regular.TTF');
  src: local("?"), url('../fonts/Poppins-Regular.woff') format("woff"), url('../fonts/Poppins-Regular.TTF') format("truetype"); 
}

@font-face 
{
  font-family: 'Roboto-Regular';
  src: url('../fonts/Roboto-Regular.TTF');
  src: local("?"), url('../fonts/Roboto-Regular.woff') format("woff"), url('../fonts/Roboto-Regular.TTF') format("truetype"); 
}

@font-face 
{
  font-family: 'alro-bold';
  src: url('../fonts/alro-bold.TTF');
  src: local("?"), url('../fonts/alro-bold.woff') format("woff"), url('../fonts/alro-bold.TTF') format("truetype"); 
}

/*Poppins-Regular, Calibri, */
html, body{font-family:Roboto-Regular, Poppins-Regular, Arial; color:#3c3f44; font-size:14px; line-height:22px;}<!-- background:#efefef url(../images/bg-blue1.png) no-repeat right top;-->



a:hover{color:#020562; text-decoration:none;}
a{color:#020562; text-decoration: none;}
/* Back to top button */

.back-to-top{position:fixed; display:none; background:#020562; color:#fff; width:44px; height:44px; text-align:center; line-height:1; font-size:16px; border-radius:50%; right:15px; bottom:15px; transition:background 0.5s; z-index:11;}
.back-to-top i{padding-top:12px; color:#fff;}

/* Start Prelaoder */

/*#preloader {position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; overflow:hidden; background:#fff;}
#preloader:before {content:""; position:fixed; top:calc(50% - 30px); left:calc(50% - 30px); border:5px solid #f2f2f2; border-top:5px solid #d29f18; border-radius:50%; width:60px; height:60px; -webkit-animation:animate-preloader 1s linear infinite; animation:animate-preloader 1s linear infinite;}
@-webkit-keyframes animate-preloader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes animate-preloader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
*/

.header{background:#fcfcfc; padding:5px 0;}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{height:50px; transition:all 0.5s; z-index:997; transition:all 0.5s; padding:0; /*border-bottom:1px solid #ccc;*/ background:#42c3aa;}
.logo{padding:5px 0 0 5px;}

.top_header_search{padding:10px 10px 0 0;}
.top_header_search a{color:#fff; margin:0 10px; font-size:18px;}

.user_name{font-size:13px !important;}

.top_search_bg{background:#c7ede6; border:0; width:200px; height:auto; border-radius:20px; display:inline-block; float:left; margin:-2px 0 0;}
.top_search_bg_icon{width:35px; padding:5px; display:inline-block; text-align:center;}
.top_search{background:#c7ede6; border:0; width:155px; height:auto; border-radius:20px; display:inline-block;}
.top_search:focus{outline:none;/* width:300px;*/}
/*.top_search:focus .top_search_bg{width:350px;}*/

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.main-nav, .main-nav * {margin:0; padding: 0; list-style: none; }
.main-nav > ul > li {position: relative; white-space: nowrap; float: left; }
.main-nav a { display: block; position: relative; color: #333; margin:0 1px; padding:10px; transition: 0.3s; font-weight: 500; line-height: 20px; font-size:13px; }
.main-nav a:hover,
.main-nav .active > a,
.main-nav li:hover > a { color: #020562; text-decoration: none; font-weight:500;}
.main-nav .drop-down ul { display: block; position: absolute; left: 0; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 10px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: ease all 0.3s; }
.main-nav .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; }
.main-nav .drop-down li {min-width: 180px; position: relative;}
.main-nav .drop-down ul a {padding:7px 10px; font-size:13px; color: #333;}
.main-nav .drop-down ul a .bi{font-size:15px;}
.main-nav .drop-down ul a:hover,
.main-nav .drop-down ul .active > a,
.main-nav .drop-down ul li:hover > a {color: #020562;}
.main-nav .drop-down > a:after {content: "\f107"; font-family: FontAwesome; padding-left: 5px;}
.main-nav .drop-down .drop-down ul {top: 0; left: calc(100% - 30px);}
.main-nav .drop-down .drop-down:hover > ul {opacity: 1; top: 0; left: 100%;}
.main-nav .drop-down .drop-down > a {padding-right: 35px;}
.main-nav .drop-down .drop-down > a:after {content: "\f105"; position: absolute; right: 15px;}

/* Mobile Navigation */
.mobile-nav {position:fixed; top:0; bottom:0; z-index:9999; overflow-y:auto; left:-260px; width:260px; padding-top:18px; background:rgba(19, 39, 57, 0.8); transition:0.4s;}
.mobile-nav * {margin: 0;padding: 0;list-style: none;}
.mobile-nav a {display: block;position: relative;color: #fff;padding:5px 10px;font-weight: 500;font-size:13px;}
.mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a {color: #020562;text-decoration: none;}
.mobile-nav .drop-down > a:after {content: "\f078";font-family: FontAwesome;padding-left: 10px;position: absolute;right: 15px;}
.mobile-nav .active.drop-down > a:after {content: "\f077";}
.mobile-nav .drop-down > a {padding-right: 35px;}
.mobile-nav .drop-down ul {display: none;overflow: hidden;}
.mobile-nav .drop-down li {padding-left: 20px;}
.mobile-nav-toggle {position:fixed;right: 0;top:5px;z-index: 9998;border: 0;background: none;font-size: 24px;transition: all 0.4s;outline: none !important;line-height: 1;cursor: pointer;text-align: right;}
.mobile-nav-toggle i {margin: 10px 18px 0 0;color: #545b62;}
.mobile-nav-overly {width: 100%;height: 100%;z-index: 9997;top: 0;left: 0;position: fixed;background: rgba(19, 39, 57, 0.8);overflow: hidden;display: none;}
.mobile-nav-active {overflow: hidden;}
.mobile-nav-active .mobile-nav {left: 0;}
.mobile-nav-active .mobile-nav-toggle i {color: #fff;}

.master-column-wrapper {margin:60px 0px; min-height:495px;}
.master-wrapper-content{margin:0;}

.leftmenu_arrow{position:relative; right:-10px; top:2px; float:right;}

.inner_container{min-height:79vh; margin:0; background:#fff; border:1px solid #ccc; padding:15px; border-radius:5px; margin:0;}



.main-nav .drop-down > a:after {content: "\f107";font-family: FontAwesome;padding-left: 5px; color:#fff; display:none;}
.main-nav .drop-down .drop-down ul {top: 0;left: calc(100% - 30px);}
.main-nav .drop-down .drop-down:hover > ul {opacity: 1;top: 0;left: 100%;}
.main-nav .drop-down .drop-down > a {padding-right: 35px;}
.main-nav .drop-down .drop-down > a:after {content: "\f105";position: absolute;right: 15px;}


.dropdown_arrow{background:url(../images/dropdown_arrow.png); width:16px; height:10px; position:absolute; right:4px; top:-10px;}

.UserPhoto{width:30px; height:30px; border-radius:50%; border:2px solid #ccc; margin: -8px 0 0;}


#footer{padding:10px 0 0px; width:100%; float:left; margin:10px 0; position:relative; z-index: 999;}
.copyright{ color:#fff; text-align:center; padding:10px 0;}
.footer_link{widows:100%; height:auto;}
.footer_link ui{margin:0; padding:0;}
.footer_link ul li{margin:0; padding:18px 15px 0; list-style-type:none; display:inline-block;}
.footer_link ul li .footer_no{background:#fcae2c; width:16px; height:16px; border-radius:50%; color:#fff; text-align:center; line-height:18px; font-size:10px; font-weight:bold; float: right; margin: -5px 0 0;}
.footer_link ul li a{color:#fff;}

@media (max-width: 767px) {
}

@media (max-width:680px) {
}

@media (max-width: 480px) {

}


a {
    text-decoration: none !important;
}

h1 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 60px;
    font-size: 3rem;
    color: #42c3aa;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 10px 0 0;
}

.agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    justify-items: center;
    max-width: 100%;
    opacity: 0;
    animation: fadeInGrid 2s ease-out forwards;
    padding: 20px;
}

.agent-card {
    width: 150px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 153, 0.8);
    font-size: 15px;
    font-weight: bold;
    color: #32a4a2;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    padding: 0 10px;
}

    .agent-card:hover {
        transform: scale(1.1) translateY(-10px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 255, 153, 0.4);
        color: white;
    }

    .agent-card.selected {
        background-color: #00ff99;
        color: #111;
        border-color: #00cc66;
        box-shadow: 0 4px 10px rgba(76, 175, 80, 0.5);
        transform: scale(1.1);
    }

.agent_name {
    line-height: 95px;
    position: absolute;
    text-align: center;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card_checkbox {
    width: 100%;
    display: none;
    text-align: right;
    position: relative;
    z-index: 99;
}

.agent-card:hover .card_checkbox,
.agent-card.active .card_checkbox {
    display: block;
}

/* Animation for card appearance */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.agent-card.dynamic {
    animation: popIn 0.5s ease-out forwards;
}

/* Execute button container */
.execute-btn {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframe for fading in the grid */
@keyframes fadeInGrid {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Robot image animation */
.robot-image {
    position: absolute;
    top: 78px;
    right: 8px;
    width: 100px;
    height: auto;
    animation: bounce 3s infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/* Small screen adjustments */
@media (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }

    .agent-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 480px) {
    .agent-grid {
        display: block;
    }

    .agent-card {
        width: 100%;
        margin: 0 0 20px;
    }
}

.agent_name{line-height:45px; float:left; text-align:center; width:85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dropdown_text{font-size:14px; color:#999;}
.dropdown-toggle::after{display:none;}
.dropdown-menu{min-width:72px; padding:2px 0; width:90px;}
.dropdown-menu li{margin:0; padding:1px; display:block; border-bottom:1px solid #ccc;}
.dropdown-menu li:last-child{border-bottom:none;}
.dropdown-menu > li > a{font-size:14px; padding:3px 10px}


.Agenda_box {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

    .Agenda_box ul {
        margin: 0;
        padding: 0;
    }

        .Agenda_box ul li {
            margin: 0;
            padding: 0 0 5px;
            list-style-type: none;
            display: block;
        }

    .Agenda_box .textbox_section {
        width: auto;
        margin: 0 0 0 30px;
        min-height: 30px;
        padding: 0 0 0 30px;
        border-left: 2px solid #333;
        border-style: dotted;
        border-bottom: none;
        border-right: none;
        border-top: none;
    }

.fa-circle {
    font-size: 11px;
    position: relative;
    margin: 0 10px 0 0;
}

.lds-ring {
    /* change color here */
    color: #1c4c5b
}

    .lds-ring,
    .lds-ring div {
        box-sizing: border-box;
    }

.lds-ring {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: -6px 0 0 -37px;
    float: left;
    position: absolute;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        margin: 8px;
        border: 2px solid currentColor;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: currentColor transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }
.modal.show .modal-dialog{top:30%;left:126px;}

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

    100% {
        transform: rotate(360deg);
    }
}

.reload-button {
    text-align: end;
}

.form-check .form-check-input {
    float: right;
    margin-left: -1.5em;
}