body{font-size: 16px;font-weight: 400;color: #33475B;font-family: 'Poppins', sans-serif;background: #f5f8fa;}
h1,h2,h3,h4,h5,h6{font-family: 'Montserrat', sans-serif;}

h3{font-size: 24px;font-weight: 600;line-height: 29.26px;color: #33475B;}

.btn{font-size:16px;line-height: 50px;text-align: center;font-weight: 500; width: 135px;height: 50px;border-radius: 5px;text-transform: uppercase;text-decoration: none;padding: 0;transition: all 0.3s ease-in-out;}
.btn-small{font-size:14px;line-height: 40px;text-align: center;font-weight: 500; width: 90px;height: 40px;border-radius: 5px;text-transform: uppercase;text-decoration: none;padding: 0;transition: all 0.3s ease-in-out;}
.btn-warning{color:#fff;background-color: #FF7A59;border: 1px solid #FF7A59;text-decoration: none;}
.btn-warning:hover{background-color: #ffbcac;color: #fff;border: 1px solid #ffbcac;}
.btn:focus, .btn-sm:focus{outline: none;border:1px solid #FF7A59;background-color:#FF7A59 ;color: #fff;box-shadow: none;}
.btn-warning-outline{color:#FF7A59;background-color: #fff;border: 1px solid #FF7A59;}
.btn-warning-outline:hover{background-color: #FF7A59;color: #fff;}
.btn-warning.disabled, .btn-warning:disabled{background-color: #EAF0F6;color: #B0C1D4;border: none;}
.link_color{color: #00A4BD;text-decoration: none;}

.table{margin: 30px 0; display: none;font-size: 14px;}
.table th{font-size: 16px;font-weight: 500;line-height: 1.4;color: #33475B;}
/* Header */
header .navbar{background: #253342;padding: 10px 0;}
header .navbar .navbar-brand:focus{outline: none;}
header .navbar .navbar-brand .img-fluid{width: 160px;}
header .navbar .btn{font-size: 14px;line-height: 45px;height: 45px;width: 120px;}

.manage-details .btn{font-size: 14px;line-height: 45px;height: 45px;width: 120px;}

/* Breadcrumb */
.breadcrumb_list{padding: 20px 0;}
.breadcrumb .breadcrumb-item a{color:#99ACC2}

/* Form */
.form-control{padding: 20px;color: #33475b;font-size: 14px;font-weight: 400;outline: none !important;box-shadow: none !important; border: 1px solid #CBD6E2;background: #F5F8FA;}
.form-control:focus{border-color: rgba(0,208,228,0.5);background: #F5F8FA;}
.form-control:focus, .form-select:focus {border-color: rgba(0,208,228,.5) !important;box-shadow: 0 0 4px 1px rgb(0 208 228 / 30%), 0 0 0 1px #00d0e4 !important;outline: 0 !important;}
.form-select{padding: 15px;color: #33475b;font-size: 14px;font-weight: 400;outline: none !important;box-shadow: none !important; border: 1px solid #CBD6E2;}
.form-control.error-msg, .form-select.error-msg{border: 1px solid rgb(255, 53, 53);}

/*alert*/
.alert {
    padding: 8px;
    font-size: 14px;
}
.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    z-index: 2;
    padding: 0;
    background-size: 70%;
}
#error-alert,#success-alert{display: none;}
.alert p{margin-bottom: 0;}
/* Content Box */
.content_box{padding: 50px 15px;background: #fff;border-radius: 10px;}
.content_box h3{margin-bottom: 40px;}
.content_box p{font-weight: 400;}

.account-login{padding:30px 0;}
.account-login .content_box{padding:30px 15px;}
.account-login .content_box h3{margin-bottom: 20px;}
.account-login .content_box .form-control{padding: 9px 10px;}
.account-login .content_box .form-label{font-size: 14px;}
.account-login .content_box p{font-size: 14px;}

.account{padding: 25px 0;}

.manage-details .form-control{padding: 9px 10px;}
.manage-details .form-label{font-size: 14px;}
.manage-details .form-select{padding: 11px;}

.modal h3{font-size: 20px;}
.modal-content{border: none;}
.modal-header{background-color:#00bda5;background-image: linear-gradient(-303deg,#00a4bd,#00afb2 56%,#00bda5);padding: 20px;}
.modal-header h3{color: #fff;font-weight: 600;margin-bottom: 0;}
.modal-header button{background:none;color: #fff !important;font-size: 18px;opacity: 1 !important;line-height: 1;padding: 0 !important;margin:0 !important}
.modal-body{padding: 20px 30px;}
.modal-body .staging{position: relative;}
.modal-body .staging:after {content: "";position: absolute;width: 90%;height: 2px;background: #FF7A59;left: 50%;transform: translate(-50%,-50%);top: 50%;z-index: 1;}
.modal-body .stage_number{width: 45px;height: 45px;border-radius: 50%;background: #fff;text-align: center;line-height: 45px;color: #FF7A59;font-weight: 600;font-family: 'Montserrat';position: relative;z-index: 2;border: 2px solid #FF7A59;}
.modal-body .stage_number.active{background: #FF7A59;text-align: center;line-height: 45px;color: #fff;font-weight: 600;font-family: 'Montserrat';position: relative;z-index: 2;border: 2px solid #FF7A59;}
.modal-body .form-control{padding:15px}
.modal-footer{background: #F5F8FA;display: block;}
.custom-dimension .form-select{padding: 14px;}
.first_buttonSet{display: flex;}
.second_buttonSet{display: none;}
.third_buttonSet{display: none;}
.custom-dimension{display: none;padding: 30px 0;}
.installation{display: none;text-align: center;padding: 30px 0;}
.installation h3{font-size: 20px;margin-bottom: 20px;font-weight: 500;}

.form-control.is-valid, .was-validated .form-control:valid{border-color: #CBD6E2;background-image:none !important}
.form-select.is-valid, .was-validated .form-select:valid{border-color: #CBD6E2;}

.invalid-feedback{font-size: 13px;position: absolute;width: inherit;z-index: 1;}

.msg{padding: 0;margin-bottom: 0;list-style: none;font-size:14px}
.manage-details .alert{display: none;}
.preloader{display:none;position: fixed;width: 100%;height: 100vh;background: rgb(214 211 211 / 50%);z-index:1100}
.preload_image{
    animation: preloader ease 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    position: fixed;
    top: 50%;
    left: 50%;
}
@keyframes preloader {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

@media(max-width:767px){
    h3{font-size: 20px;font-weight: 500;}
    .content_box h3 {
        margin-bottom: 20px;
        font-size: 20px;
    }
    .content_box{padding:30px 15px }
    .account{padding-top: 0;}
}


.header2 .navbar.bg-dark{background-color:#2E3F50 !important;}
.header2 .navbar .nav-link{color:#d1d5db;}
.header2 .navbar .nav-item{padding: 0 7px;font-size: 14px;}
.header2 .navbar .nav-item .nav-link{transition: ease 0.5s;}
.header2 .navbar .nav-item .nav-link:hover{color:#fff;background-color: #253342;border-radius: 5px;}
.header2 .right-img li {list-style-type: none;font-size: 14px;}
.header2 .right-img .profile{padding: 10px;}
.header2 .right-img li img{width: 40px;margin-top: auto;margin-bottom: auto;}
.header2 .right-img i {margin: 14px 0;color: #ffffff;border-radius: 50%; }
.header2 .right-img li img{border-radius: 50%;}
/* header{background-color: #ffffff;}
body{background-color: #f5f8fa;} */
.header2 .col-md-9 ul {padding: 0;}
.header2 .dropdown-menu .profile{padding-bottom: 15px;padding-top: 15px;margin-bottom: 15px;border-bottom:1px solid #dbdcf7;}
.header2 .right-img .dropdown-menu {min-width: 315px;top: 65px !important; right: 15px !important;}
.header2 .right-img .dropdown-menu::before {content: "";display: block;position: absolute;top: -9px;right: 1px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #ffffff;}
.header2 .right-img .profile li{font-size: 14px;}
.header2 .navbar .right-img a.btn:focus{box-shadow: none;}
.header2 button.navbar-toggler.text-white.border-white {padding: 0;width: 45px;height: 40px;}

.title_bar{background: #fff;padding: 15px 0;margin-bottom: 30px;}
.title_bar h3{margin-bottom: 0;font-size: 20px;font-weight: 500; }

/***main-content**/
.main-content .nav-link{color:rgb(51, 71, 91);text-align: left;}
.main-content .nav-link.active{background-color: rgb(234, 240, 246);color:#33475B;font-weight: 500;}
.main-content .nav-link:hover{background-color: rgb(234, 240, 246);transition: ease 0.5s;}
.main-content .content .left_content{padding: 15px;border-radius: 5px;margin-bottom: 30px;} 
.main-content .tab-content{border-radius: 5px; padding: 20px;min-height: 70vh;}

/*Code Syntax highlight*/
.code-box-copy {
    position: relative;
    font-size: 14px;
    display: none;
}

.code-box-copy pre[class*="language-"] {
    border: 1px solid #ddd;
    border-radius: 2px;
}

.code-box-copy__btn {
    opacity: 0;
    position: absolute;
    top: 11px;
    right: 11px;
    width: 30px;
    height: 30px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 4px;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.code-box-copy__btn::before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAqFBMVEUAAAAAAABVVVUzMzMvLy83NzcxMTE1NTUwMDA0NDQyMjIyMjI0NDQzMzMyMjIyMjI0NDQzMzMzMzMzMzMyMjIzMzMzMzMzMzMzMzMzMzMyMjI0NDQ0NDQ0NDQ0NDQzMzMyMjIzMzMyMjIyMjIyMjIzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzP///9DIGoyAAAANnRSTlMAAgMFGxwfIiUnM0hJUFFbXm53eISHiI2RkpOZnqOoqrG1trvAzdTX2tvf4OLn6uzt7/H6/P712vOKAAAAAWJLR0Q3MLi4RwAAAJNJREFUGNNlzusOgjAMBeDibRPnBcWhTp3OK3gH6fs/mg00YYnnT7MvTXcAAIL5GxFfEjjBujwKIW6K3217jh3NlKG1SbtRBYulMWYCSbma7vYEGR60NgXkzlpL2/HzEgFIBKyPJ4++82H2CcGH3peK4KiBQUZFOtCAunIpgmJLvzsPxppiPaii/uAe1hkyyBw5px8y3hFi8qzDHwAAAABJRU5ErkJggg==) no-repeat 0 0;
}

.code-box-copy:hover .code-box-copy__btn {
    opacity: 1;
}

.code-box-copy__btn:disabled {
    background-color: #eee;
    border-color: #ccc;
    color: #333;
    pointer-events: none;
}

.code-box-copy__btn:hover {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
}

.code-box-copy__btn:focus,
.code-box-copy__btn:active {
    outline: 0;
}

.code-box-copy__tooltip {
    display: none;
    position: absolute;
    bottom: -webkit-calc(100% + 11px);
    bottom: calc(100% + 11px);
    right: 0;
    width: 80px;
    padding: 6px 0;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    font-size: 13px;
}

.code-box-copy__tooltip::after {
    display: block;
    position: absolute;
    right: 13px;
    bottom: -5px;
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
}

.code-box-copy pre::-webkit-scrollbar {
    height: 5px;
    width: 4px
}

.code-box-copy pre::-webkit-scrollbar-thumb {
    background: #a1a1a1;
    border-radius: 100px
}

.code-box-copy pre::-webkit-scrollbar-thumb:active {
    background: #444
}

@media (max-width: 767px) {
    .header2 .right-img .dropdown-menu {
        min-width: 260px;
        top: 65px !important;
        right: 15px !important;
        font-size:12px;
    }
    .navbar-brand img{max-width: 170px;}
    .title_bar h3{font-size: 18px;}
   
}