:root{
    --dgreen: #023C40;
    --lgreen: #0F464A;
    --white: #ffffff;
    --black: #333333;
    --orange: #FF9210;
    --sky: #19C0CC;
    --blue: #2253DD;
    --red: #E2252B;
    --gray: #ececec;
    --danimate: .5s all ease-in-out;
}
/* .phpdebugbar{
    display: none;
} */
hr {
    margin: 30px 0;
}
body{
    font-family: 'Poppins', sans-serif;
    background-color: #E7FCF6;
    font-size: 14px;
    color: var(--black);
    margin: 0 !important;
}
h1, h2, h3, h4, h5, h6{
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}
a, a:hover, a:focus, a:active{
    text-decoration: none;
}
.app_content h1, .app_content h2, .app_content h3, .app_content h4, .app_content h5, .app_content h6{
    margin-bottom: 30px;
}
ul, ol{
    padding: 0;
    margin: 0;
    list-style: none;
}
table td, table th {
    vertical-align: middle;
}
.myapp {
    height: calc(100vh - 0px);
    position: relative;
    overflow: hidden;
}
.custom_msg_notification {
    position: absolute;
    z-index: 999;
    background: var(--dgreen);
    color: var(--orange);
    min-width: 300px;
    left: 50%;
    top: -30%;
    transform: translate(-50%, 0%);
    padding: 5px 20px;
    text-align: center;
    transition: 1s all linear;
}
.custom_msg_notification:before, .custom_msg_notification:after {
    content: '';
    width: 30px;
    height: 80px;
    display: inline-block;
    position: absolute;
    top: -60px;
    left: -20px;
    border-left: 3px solid var(--dgreen);
    border-bottom: 3px solid var(--dgreen);
}
.custom_msg_notification:after {
    left: unset;
    right: -20px;
    border-left: unset;
    border-right: 3px solid var(--dgreen);
}
.custom_msg_notification.show_animation {
    top: 55px;
}
.custom_msg_notification p {
    padding: 0;
    margin: 0;
}
.sidebar{
    width: 100%;
    background: var(--dgreen);
    padding: 20px 0px;
    height: calc(100vh - 0px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.logo {
    color: var(--white);
    text-align: center;
}
.logo.login img{
    height: 250px;
}
.logo h2 {
    font-size: 18px;
}
.sidebar ul{
    margin-top: 20px;
}
.sidebar ul li a {
    display: block;
    color: var(--white);
    padding: 5px 10px;
    margin-bottom: 10px;
    transition: var(--danimate);
    font-weight: bold;
    text-decoration: none;
}
.sidebar ul li a i {
    display: inline-block;
    font-size: 16px;
    color: var(--white);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding-top: 7px;
    transition: var(--danimate);
    text-align: center;
    margin-right: 10px;
}
.sidebar ul li.active > a, .sidebar ul li:hover > a{
    background-color: var(--lgreen);
    color: var(--orange);
}
.sidebar ul li.active > a i, .sidebar ul li:hover > a i{
    color: var(--orange);
}
li.menu-item-has-children > a {
    position: relative;
}
li.menu-item-has-children > a:after {
    content: '\f0d7';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
}
li.menu-item-has-children {
    max-height: 50px;
    overflow: hidden;
    /* transition: .5s linear max-height; */
}
li.menu-item-has-children.showing {
    max-height: 1000px;
    overflow: hidden;
    /* transition: 1s linear max-height; */
}
li.menu-item-has-children > ul li a:before {
    display: inline-block;
    content: '\f068';
    font-family: 'FontAwesome';
    width: 30px;
    text-align: center;
    margin-left: 30px;
}



.app_space {
    background: var(--white);
    overflow: hidden;
    box-shadow: 4px 2px 10px #ccc;
}
.app_header{
    position: relative;
}
.apptopbar{
    position: absolute;
    background: var(--white);
    box-shadow: 0 1px 10px #ccc;
    width: 100%;
    height: 50px;
    top: 0;
    z-index: 9;
    padding: 10px;
}
.apptopbar ul {
    text-align: right;
}
.apptopbar ul li{
    display: inline-block;
    vertical-align: top;
}
.apptopbar ul li a {
    display: block;
    width: 30px;
    height: 30px;
    /* background: var(--dgreen); */
    text-align: center;
    color: var(--dgreen);
    padding-top: 5px;
    font-size: 14px;
    border-radius: 100%;
    margin-right: 10px;
}
.apptopbar ul li a:hover{
    /* background-color: var(--orange); */
    color: var(--orange);
}
.apptopbar ul li:last-child a{
    color: var(--orange);
}
.apptopbar ul li p {
    display: inline-block;
    width: fit-content;
    line-height: 10px;
    margin: 0 10px 0 0;
    vertical-align: middle;
}
.apptopbar ul li span{
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 100%;
    vertical-align: middle;
}
.apptopbar ul li p i {
    font-size: 10px;
    font-style: inherit;
}
.app_area {
    padding: 60px 10px 0;
    height: calc(100vh - 0px);
    overflow-y: auto;
    position: relative;
    overflow-x: hidden;
    z-index: 2;
}
.app_content{
    min-height: calc(100vh - 60px);
}
.app_content input, .app_content textarea, .app_content select, .app_content button {
    display: block;
    width: 100%;
    padding: 5px 20px;
    margin-bottom: 15px;
    border: 2px solid var(--dgreen);
    outline: none;
    transition: var(--danimate);
}
.app_content input:focus, .app_content textarea:focus, .app_content select:focus {
    border-color: var(--orange);
}
.app_content textarea, .app_content select[multiple] {
    resize: none;
    height: 110px;
}
.app_content select[multiple] option {
    display: block;
    padding: 5px 0;
    border-bottom: 1px solid rgb(204 204 204 / 50%);
    cursor: pointer;
}
.app_content input[type="submit"], .app_content button {
    background: var(--dgreen);
    color: var(--white);
    font-weight: bold;
    width: fit-content;
    text-transform: uppercase;
    transition: var(--danimate);
}
.app_content input[type="submit"]:hover, .app_content input[type="submit"]:focus, .app_content button:focus, .app_content button:hover{
    background-color: var(--orange);
    border-color: var(--orange);
}
.app_content input[type="submit"]{
    margin-bottom: 0;
}
/* .app_content table input[type="submit"], .app_content table a  */
.app_content table input[type="submit"] {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    color: var(--black);
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    vertical-align: middle;
}
.app_content table input[type="submit"]:hover{
    color: var(--orange);
    background: transparent;
}
.content-top-right {
    text-align: right;
}
.content-top-right a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    padding: 7px 10px;
    background: var(--dgreen);
    color: var(--white);
    transition: var(--danimate);
    margin-left: 10px;
}
.content-top-right form {
    display: inline-block;
}
.content-top-right form button {
    width: 50px;
    display: inline-block;
    height: 33px;
    margin-left: -5px;
    background: var(--dgreen);
    color: var(--white);
    transition: var(--danimate);
}
.content-top-right form button:hover, .content-top-right a:hover {
    background: var(--orange);
}
.content-top-right form input {
    display: inline-block;
    width: 200px;
}
.dev_by {
    color: var(--white);
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
.dev_by a {
    color: var(--orange);
    font-weight: bold;
}
.st_card {
    padding: 40px;
    text-align: right;
    background: var(--dgreen);
    color: var(--white);
    margin-bottom: 20px;
    box-shadow: 5px 5px 6px var(--gray);
}
.st_card h3 {
    margin: 0;
}
.st_wave {
    position: relative;
    overflow: hidden;
}
.st_wave:before {
    background-image: url(../images/wave.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    content: '';
    height: 100%;
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
}
.st_card_light h4 {
    margin: 0px 0 10px;
}
.notice_board_post h5 {
    margin: 0;
}
.notice_board_post p {
    margin-bottom: 0;
}
.notice_board_post:after {
    content: '';
    display: block;
    width: 50%;
    height: 1px;
    background: var(--dgreen);
    margin: 10px auto;
    opacity: .2;
}
.app_content .heading_border:after{
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--dgreen);
    margin-top: 5px;
}
/* .app_space:after {
    content: '';
    width: 500px;
    height: 500px;
    background: url(../images/original_logo.png) no-repeat;
    display: block;
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-size: contain;
    background-attachment: fixed;
    opacity: 0.1;
} */
.select2-selection {
    border-radius: 0 !important;
    border: 3px solid var(--dgreen) !important;
    padding: 2px !important;
    height: 36px !important;
    margin-bottom: 15px;
}
.select2-container--focus .select2-selection{
    border-color: var(--orange) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 36px;
}
input[disabled]{
    cursor:not-allowed;
}
tbody#form_table_row_container input, tbody#form_table_row_container select {
    margin-bottom: 0;
}
.app_content .invoice_list button {
    width: 100%;
}
.app_content h3.accordion-header {
    margin-bottom: 0;
    position: relative;
}
.app_content h3.accordion-header .inv_status {
    position: absolute;
    right: 20px;
    color: var(--orange);
}
.accordion-body {
    padding: 0;
}
.accordion-flush .accordion-item .accordion-button {
    border-radius: 0;
    background: var(--dgreen);
    color: var(--white);
}
.small_form_card {
    background: var(--gray);
    padding: 20px;
}
.pagination nav > :first-child {
    display: none;
}
.pagination span svg {
    width: 21px;
}

.shake{
    animation: shake 0.5s;
}
.btn-group > button {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    outline: none;
    border: none !important;
    background: var(--black);
}
.btn-group > button:active, .btn-group > button:focus {
    outline: none;
    box-shadow: none !important;
    background: var(--black);
}
.btn-group > ul {
    padding: 0;
}
.btn-group > ul li a {
    padding: 5px 20px;
    display: block;
    color: var(--white);
    transition: .2s all linear;
}
.btn-group > ul li a:hover{
    background-color: var(--white) !important;
    color: var(--black);
}
.clear_filter {
    position: relative;
    height: 100%;
    width: 100%;
}
.clear_filter > * {
    display: inline-block !important;
    margin-top: 20px;
    margin-right: 10px;
}
.clear_filter > a {
    color: var(--red);
    font-weight: 700;
    font-size: 12px;
}
.clear_filter > a i{
    margin-right: 5px;
}
.loginform input#username, .loginform input#password,
.loginform input#username:focus, .loginform input#password:focus  {
    background: #e8f0fe;
    outline: none;
    box-shadow: none;
}
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background:  var(--gray);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--lgreen);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--black);
}








.upload-container {
    position: relative;
}

.upload-container input {
    border: 1px solid #92b0b3;
    background: #f1f1f1;
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    padding: 100px 0px 100px 250px;
    text-align: center !important;
    width: 500px;
}

.upload-container input:hover {
    background: #ddd;
}

.upload-container:before {
    position: absolute;
    bottom: 50px;
    left: 245px;
    content: " (or) Drag and Drop files here. ";
    color: #3f8188;
    font-weight: 900;
}

.upload-btn {
    margin-left: 300px;
    padding: 7px 20px;
}
.btn-theme{
    background: var(--dgreen);
    color: var(--white);
}
.btn-theme:hover{
    background: var(--orange);
    color: var(--white);
}
.hideit{
    opacity: 0;
    visibility: hidden;
}

/* drop area */
.file-area {
    width: 100%;
    position: relative;
}
.drop_files {
    background: #cccccc30;
    padding: 10px;
    transition: .5s all linear;
}
.file-area input[type=file] {
    position: absolute;
    width: 100%;
    height: 85px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}
.file-area .file-dummy {
    width: 100%;
    padding: 30px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: background 0.3s ease-in-out;
    border: 3px dashed var(--dgreen);
}
.file-area:hover .file-dummy {
    background: rgba(255, 255, 255, 0.1);
}
.file-area input[type=file]:focus + .file-dummy {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline: -webkit-focus-ring-color auto 5px;
}
/* .file-area input[type=file]:valid + .file-dummy {
border-color: rgba(0, 255, 0, 0.4);
background-color: rgba(0, 255, 0, 0.3);
} */
.file-area input[type=file]:valid + .file-dummy .success {
    display: inline-block;
}
.preview_uploading {
    display: flex;
    flex-wrap: wrap;
}
.preview_uploading > div {
    width: calc(20% - 10px);
    height: 70px;
    position: relative;
    align-items: flex-start;
    display: flex;
    margin: 20px 5px 0;
    border: 1px solid var(--dgreen);
    overflow: hidden;
}
.preview_uploading > div span {
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--dgreen);
    color: var(--white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-top: 3px;
    opacity: 0;
    cursor: pointer;
    transition: .5s all linear;
}
.preview_uploading > div:hover span{
    opacity: 1;
}
.preview_uploading .preview_img {
    width: 100%;
    height: 70px;
    overflow: hidden;
    border-radius: 0;
}
.preview_uploading .preview_img img {
    width: 100%;
    height: auto;
}
div#examaccordion h2 {
    margin: 0;
}
div#examaccordion h2 button {
    margin: 0;
    width: 100%;
    background: var(--dgreen);
    color: var(--white);
    border: 2px solid var(--dgreen);
    outline: none;
    box-shadow: none;
    border-radius: 0px;
    position: relative;
}
div#examaccordion h2 button .button_name{
    color: var(--orange);
    min-width: 120px;
    display: inline-block;
}
div#examaccordion h2 button .exam_icon{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%) rotate(180deg);
    transition: .1s all linear;
}
div#examaccordion h2 button.collapsed .exam_icon{
    transform: translate(0, -50%) rotate(0deg);
}
#examaccordion .accordion-body {
    padding: 20px;
    border-radius: 0px;
}
#examaccordion .accordion-item {
    margin-bottom: 10px;
}
table, table tr, table td {
    vertical-align: baseline;
}
table input[type="time"], table input[type="date"] {
    width: 120px;
    padding: 5px 10px;
}
table tr td input {
    margin-bottom: 0 !important;
}
.app_content table button {
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--red);
}
input.qty_input {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}
.select2 {
    max-width: 100%;
}
table{
    margin-bottom: 0;
}
.vertical_text {
    width: 100%;
    height: 100%;
    text-align: center;
    background: var(--orange);
    padding-right: 20px;
    font-size: 28px;
    position: relative;
}
.vertical_text p {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    text-transform: uppercase;
}
p.verticle_table_text {
    margin: 0;
    writing-mode: vertical-lr;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    transform: rotate(180deg) scale(1.5) translate(-50%, 0);
    position: relative;
    left: -20%;
    text-transform: uppercase;
}
.table_verticle_text{
    vertical-align: middle;
    max-width: 20px;
}
.reporting_table > :not(:first-child){
    border-top: none;
}
.system_popup_area {
    position: fixed;
    bottom: 0;
    right: -110vw;
    z-index: 9999999;
    width: 83.33333333%;
    background: rgb(204 204 204 / 70%);
    height: calc(100vh - 50px);
    transition: .2s all linear;
}
.system_popup_area.show_popup{
    right: 0vw;
}
.system_popup_content {
    position: relative;
    height: 100%;
    width: 55vw;
    margin-left: auto;
    padding: 30px 20px;
    background: #fff;
}
.popup_close {
    display: inline-block;
    background: var(--orange);
    color: var(--black);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}
.app_content .system_popup_area select {
    padding: 5px 5px;
}
.system_popup_content input[type=submit] {
    padding: 5px 20px;
}
.system_popup_content input {
    padding: 5px 5px;
}
#sortable {
    cursor: grab;
}
.ui-sortable-helper, .ui-sortable-helper td{
    background-color: var(--sky);
    color: var(--white) !important;
}
.reporting_card {
    background: #f1f1f1;
    padding: 15px;
    height: 100%;
}
.reporting_card h5 {
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--black);
    padding-bottom: 10px;
}
ul.reporting_list li a {
    display: block;
    color: var(--black);
    border-bottom: 1px solid #c6c6c6;
    padding: 5px;
    transition: .5s all linear;
}
ul.reporting_list li:last-child a{
    border: none;
}
ul.reporting_list li a:hover {
    background: var(--dgreen);
    border-color: var(--orange);
    color: var(--white);
}
label > .required {
    color: red;
}
.stock_sale_purchase_form input[type=number] {
    text-align: center;
    padding: 5px 10px;
}
.stock_sale_purchase_form input[type=number]::-webkit-outer-spin-button,
.stock_sale_purchase_form input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.table tr td{
    vertical-align: middle;
}
.items_list {
    background: var(--dgreen);
    color: var(--white);
    padding: 3px 5px;
    display: inline-block;
    margin-top: 3px;
    border-radius: 5px;
    font-size: 12px;
}
#piechart_3d path {
    cursor: pointer;
}
#exam_class_checking tr, #exam_class_checking tr input[type=checkbox] {
    cursor:pointer;
}
#exam_class_checking tr td input[type=checkbox] {
    position: relative;
    z-index: -1;
}
.sticky_thead {
    position: sticky;
    top: -10px;
}
/* css loader */
.loading_full_screen {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgb(2 60 64 / 90%);
    transition: .2s all linear;
}
.loading_full_screen.hide_page_loader {
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
}
.loading_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* loader end */





table hr {
    margin: 0;
}



.text-right{
    text-align: right;
}
.developed_by a {
    color: var(--orange);
    font-weight: bold;
}
/* colors */
.btn-success, .btn-success:hover{
    background-color: var(--dgreen);
    border-color: var(--dgreen);
}
.btn-warning, .btn-warning:hover{
    background-color: var(--orange);
    border-color: var(--orange);
}
.btn-info, .btn-info:hover{
    background-color: var(--sky);
    border-color: var(--sky);
}
.btn-info:hover, .btn-success:hover, .btn-warning:hover{
    opacity: 0.8;
}
.sbg_orange{
    background-color: var(--orange) !important;
}
.sbg_red{
    background-color: var(--red) !important;
}
.sbg_sky{
    background-color: var(--sky) !important;
}
.sbg_blue{
    background-color: var(--blue) !important;
}
.sbg_dgreen{
    background-color: var(--dgreen) !important;
}
.sbg_lgreen{
    background-color: var(--lgreen) !important;
}
.sbg_black{
    background-color: var(--black);
}
.text-orange{
    color: var(--orange);
}
.w-5{
    width: 5%;
}
.w-10{
    width: 10%;
}
.w-15{
    width: 15%;
}
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-bottom: 0px;
}
.print_area{
    display: none;
}