/*@import url('https://www.fontstatic.com/f=geeza-pro-bold');
@import url('https://www.fontstatic.com/f=sky-bold');*/

/*@font-face {
font-family: myFont;
src: url(../fonts/dubai.ttf);
}

@font-face {
font-family: myFontMedium;
src: url(../fonts/dubai-medium.ttf);
}

@font-face {
font-family: myFontBold;
src: url(../fonts/dubai-bold.ttf);
}*/


@font-face {
font-family: myFont2;
src: url(../fonts/geeza-pro.ttf);
}

@font-face {
font-family: myFont2Bold;
src: url(../fonts/geeza-pro-bold.ttf);
}




:root {
--blue: #0a5b5f;
/*--blueDark: #304891;
--blueLight: #eef1f6;*/
--main-color: #0a5b5f;
--main-color-light: #117d83;
}

body {
/* background-image: url(/imgs/loginBG.svg) !important;*/
background: #F1F5F9;
font-family: myFont2Bold,myFont,tahoma,arial, serif;
}

.form-control-feedback {
background-color: #f2dede;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.navbar-default {
background-color: var(--main-color);
/*border-bottom: 1px solid rgba(219,219,219,1);*/
z-index: 2000;
/*box-shadow: 0 3px 3px rgba(0,0,0,0.09), 0 3px 3px rgba(0,0,0,0.09);*/
border-radius: 0;
/*box-shadow: 0px 5px 15px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.18);
-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.18);
border-bottom: 1px solid #dbdbdb;*/
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a {
    padding: 18px;
    color: #FFF;
}

    .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
        color: rgba(255,255,255,0.8);
    }

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand {
    font-size: 24px;
    padding-top: 8px;
    color: rgba(117,117,117,1);
    font-family: myFontBold;
    width: 240px;
    height: 57px;
    /*  border-left: 1px solid rgba(219,219,219,1);*/
    text-align: center;
    /* background: #FFFFFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);*/
}

a.navbar-brand {
padding: 0;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color: var(--main-color);
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand img {
display: inline-block;
/*margin-left: 10px;
    width: 147px; */
/* height: 30px; */
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand span {
color: var(--main-color);
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a {
font-size: 16px;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a {
    font-size: 14px;
}

.nav-sidebar a {
font-size: 24px;
display: block;
text-align: center;
}

.nav-sidebar .zmdi {
font-size: 24px;
display: block;
text-align: center;
}

.nav-sidebar .fa {
font-size: 22px;
display: block;
text-align: center;
}

.nav-sidebar > li > a > span {
display: block;
font-size: 18px;
margin-top: 5px;
}

.modal {
z-index: 9999;
}

.modal-lg {
width: 99% !important;
}

.main .page-header {
border-bottom: none;
margin-top: 15px;
margin-right: 12px;
}

.dropdown-menu > li > a:hover {
background: var(--main-color);
color: #FFFFFF;
}

.main .grid_menu .grid_tab {
background: rgba(255,255,255,0.5);
margin-bottom: 24px;
min-height: 150px;
border-radius: 8px;
text-align: center;
color: rgba(0,0,0,0.9);
display: block;
cursor: pointer;
text-decoration: none;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border:1px solid #ddd;
}

.main .grid_menu .grid_tab:hover {
    color: rgba(255,255,255,0.9);
    background: var(--main-color);
    box-shadow: 0 3px 15px rgba(10, 91, 95,0.49);
    animation: mm ease 0.2s;
}

.main .grid_menu .grid_tab i {
    font-size: 64px;
    margin-top: 25px;
    margin-bottom: 15px;
}

@keyframes mm {
from {
    transform: translateY(-2px);
}

to {
    transform: translateY(2px);
}
}
/*.main .grid_menu .grid_tab:hover i{
    animation:mm ease 0.4s;
}
.main .grid_menu .grid_tab:hover p {
animation: mm ease 0.4s;
}*/
.main .grid_menu .grid_tab p {
font-size: 21px;
}

.grid_tab .enTitle {
font-size: 16px !important;
padding-bottom: 20px;
text-transform: uppercase;
}

.myForm {
font-weight: normal;
font-size: 20px;
margin-bottom: 45px;
/*margin-right: 20px;
margin-left: 10px;*/
}

.myForm label {
    font-weight: normal;
}

.myForm .formHeader {
    /*  border-bottom: 1px solid #dbdbdb;*/
    padding: 16px 24px;
    font-size: 18px;
    background: #FFFFFF;
    color: rgba(0,0,0,0.8);
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}

.formHeaderBgGreen {
border-top: 3px solid #16a085 !important;
/* background: #16a085 !important;  */
color: #16a085 !important;
}

.formHeaderBgRed {
border-top: 3px solid #c0392b !important;
/*background: #c0392b !important;*/
color: #c0392b !important;
}

@keyframes backanim {
from {
    transform: translateX(-3px);
}

to {
    transform: translateX(3px);
}
}

.myForm .backBox {
padding: 7px 14px;
margin: 0;
margin-top: 0px;
margin-left: 20px;
margin-top: 16px;
/*background: #EEE;*/
color: rgb(72, 109, 218);
float: right;
height: 45px;
border-radius: 32px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-weight: bold;
font-size: 24px;
}

.myForm .backBox:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    animation: backanim 0.8s ease infinite;
}

.myForm .formHeader .formTitle {
padding: 16px 0px;
padding-top: 19px;
}

.myForm .formHeader .formTitle span {
    font-size: 28px;
    font-weight: bold;
    padding: 0 9px;
}

.myForm .formHeader .formSearchPane {
/*padding-left: 12px;*/
position: relative;
}

.myForm .formHeader .searchBox {
padding: 3px;
padding-right: 15px;
padding-left: 45px;
border: none;
outline: none;
background: #EEE;
width: 100%;
margin-top: 17px;
border-radius: 2px;
color: rgba(0,0,0,0.6);
transition: 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-size: 18px;
height: 40px;
}

.myForm .formHeader .searchBox:focus {
    background: #EEE;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.myForm .formHeader .formSearchPane i {
position: absolute;
top: 27px;
left: 10px;
font-size: 22px;
color: rgba(0,0,0,0.6);
}

.myForm .formHeader .btnExport {
background: #16a085;
border: none;
border-radius: 2px;
margin-top: 25px;
color: #FFFFFF;
font-size: 22px;
height: 31px;
line-height: 31px;
padding: 0;
transition: 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.myForm .formHeader .btnExport:hover {
    background: #0E6A58;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.myForm .formBody {
min-height: 100px;
padding: 24px;
}

.myForm .formFooter {
border-top: 1px solid #dbdbdb;
padding: 0 24px;
display: none;
}

.formFooterGreen {
background: #16a085 !important;
}

.formFooterRed {
background: #c0392b !important;
}

.myForm .formActionBar {
/* border-bottom: 1px solid #dbdbdb;*/
text-align: center;
background: #f5f5f5;
border-radius: 10px;
margin: 0 22px;
}

.formActionBar button {
display: block;
padding: 18px;
border: none;
outline: none;
background: transparent;
}

.formActionBar button:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 10px;
    animation: zoomani 0.3s ease;
}

@keyframes zoomani {
from {
    transform: translateY(-1px);
}

to {
    transform: translateY(1px);
}
}

.myForm .formActionBar a.actionBtn {
display: block;
text-align: center;
padding: 18px 0;
text-decoration: none;
color: rgba(0,0,0,0.7);
cursor: pointer;
}

.myForm .formActionBar a.actionBtn:hover {
    background: rgba(255,255,255,0.7);
    color: rgba(0,0,0,1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 10px;
    animation: zoomani 0.3s ease;
}

.myForm .formActionBar a.actionBtn-blue {
color: var(--main-color);
}

.myForm .formActionBar a.actionBtn-blue:hover {
    color: var(--main-color-light);
}

.myForm .formActionBar a.actionBtn-green {
color: #00BCD4;
}

.myForm .formActionBar a.actionBtn-green:hover {
    color: #0098AB;
}

.myForm .formActionBar a.actionBtn-red {
color: #E2534E;
}

.myForm .formActionBar a.actionBtn-red:hover {
    color: #AC3B37;
}

.myForm .formActionBar .actionBtn i {
font-size: 28px;
}

.myForm .formActionBar .actionBtn p {
font-size: 21px;
font-weight: normal;
margin: 0;
}

.form-control {
font-size: 16px;
padding: 6px;
}

.myForm .form-control {
font-size: 18px;
}

.myForm .form-control-danger {
border: 2px solid #d9534f;
background: #FFF;
}

.myForm .form-control:focus {
border: 1px solid var(--main-color);
background: #0a5b5f1c;
}

.myForm select.form-control {
font-family: myFont2Bold,Tahoma,Arial,sans-serif;
}

.myForm .formFooter {
background: var(--main-color);
font-size: -9999px;
height: 5px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}

.myForm .glyphicon-asterisk {
color: #E2534E;
font-size: 8px;
}

.myForm .add-dropdown-item {
color: var(--main-color);
}

.nav-tabs {
border-bottom: 1px solid #ddd;
margin-top: 5px;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
margin-right: 16px;
margin-left: 16px;
}

.myForm .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border: none;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
    background: none;
}

.myForm .nav-tabs > li > a {
color: #555;
padding: 10px 10px;
}

.myForm .nav-tabs > li > a:hover {
    background: none;
    border: none;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
}

.myForm .tab-pane {
padding: 24px 0;
padding-bottom: 0;
}

.tooltip {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
}

.table {
margin-bottom: 0;
border-collapse: collapse;
}

.table thead {
    background: rgba(255,255,255,1);
    font-family: myFont2Bold;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.table-striped > tbody > tr:hover {
background: #EEE;
}

.table thead tr th {
/* border: 1px solid #ddd;
border-bottom: 2px solid #ddd;*/
}

.table tbody tr td {
padding: 10px;
font-size: 14px;
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* border: 1px solid #ddd;*/
}


.table tbody tr td.actionTbl span {
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 19px;
    margin-top: 3px;
    cursor: pointer;
    margin: 0 auto;
}

    .table tbody tr td.actionTbl span:hover {
        background: #FFF;
        border-radius: 2px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

.table tbody tr td.actionTbl i {
    margin-top: 5px;
}

    .table tbody tr td.actionTbl i.zmdi-edit {
        left: 64px;
        color: var(--main-color);
    }

    .table tbody tr td.actionTbl i.zmdi-delete {
        color: #E2534E;
        left: 32px;
    }

    .table tbody tr td.actionTbl i.zmdi-folder {
        color: rgba(0,0,0,0.8);
    }

.form-table tbody tr td {
padding: 0px;
height: 32px;
}

.form-table tbody tr td .form-group {
    margin: 0;
    padding: 0;
}

.form-table tbody tr td .form-control {
    border: none;
    border-radius: 0;
    height: 33px;
    background: rgba(255,255,255,1);
    padding: 5px;
    font-size: 14px;
}

.form-table tbody tr td select.form-control {
    height: 33px;
    margin: 0;
    border-radius: 0;
    -webkit-appearance: none;
}

.form-table tbody tr td .form-control:focus {
    border: none;
    background: #0a5b5f1c;
    box-shadow: none;
}

.itmSearchBtn {
height: 33px;
border-radius: 0;
border-top: none;
border-bottom: none;
border-left: none;
padding: 6px 5px;
}

.form-table tbody tr td.actionTbl a {
margin: 0;
}

.alert {
border-radius: 0;
border: none;
font-size: 21px;
margin-bottom: 0;
margin: 0 23px;
margin-top: 5px;
border-radius: 10px;
}

.alert-success, .alert-danger, .alert-warning, .alert-info {
color: rgba(255,255,255,0.9);
}

.alert-success {
background: #43A047;
}

.alert-danger {
background: #E2534E;
}

.alert-warning {
background: #F57C00;
}

.alert-info {
background: #0288D1;
}

.list-group-item {
padding: 15px 25px;
}

.list-group-item:first-child {
    border-radius: 0;
}

.list-group-item:last-child {
    border-radius: 0;
}

.label-success, .label-danger {
display: block;
font-size: 100%;
}

.label-success, .label-primary {
display: block;
font-size: 100%;
}
/*login style started*/
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}

.form-signin .form-control {
    position: relative;
    font-size: 19px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .form-signin .form-control:focus {
        border: 1px solid var(--main-color);
        z-index: 2;
    }

.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.account-wall {
padding: 50px 0px;
border-radius: 10px;
}

.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.loginContainer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.loginRow {
display: table-cell;
vertical-align: middle;
}

.loginBody {
margin-left: auto;
margin-right: auto;
/*width: whatever width you want;*/
}

/*login style ended*/

.btn-primary {
background: var(--main-color);
border-color: var(--main-color);
}

.btn-primary:hover {
    background: var(--main-color-light);
    border-color: var(--main-color-light);
}

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary{
    background:var(--main-color-light);
    border-color:var(--main-color-light);
}

.breadcrumb {
    background: #f5f5f5;
    line-height: 50px;
    padding: 0 15px;
    margin-bottom: 0;
    font-size: 16px;
}

.breadcrumb a {
    color: rgba(0,0,0,0.8);
}

.breadcrumb > .active {
    color: rgba(0,0,0,0.6);
}

ol.breadcrumbCustom {
background: #666;
margin-bottom: 20px;
border-radius: 2px;
color: #FFF;
/* border: 1px solid #CCC;
border-left: 3px solid #999;
border-bottom: 1px solid #333;
border-top: 1px solid #999;
*/
}

ol.breadcrumbCustom li.active {
    color: #FFF;
}

.double-input .form-control {
width: 50%;
border-left-width: 0px;
}

.double-input .form-control:focus {
    border-right-width: 1px;
}

.triple-input .form-control {
width: 33.3%;
border-right-width: 0px;
}

.triple-input .form-control:focus {
    border-right-width: 1px;
}




.table-responsive {
width: 100%;
/*margin-bottom: 15px;*/
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}


.datepicker-panel > ul > li.highlighted {
background: #EEE;
color: #333;
border-radius: 100px;
}

.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover {
background: #346dd0;
color: #FFF;
border-radius: 100px;
}

/*card style*/
.card {
background: #fff;
border-radius: 2px;
position: relative;
}

.card-1 {
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
/*box-shadow: 0 .15rem 1.1rem 0 rgba(58,59,69,.2) !important;*/
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
/*border: 1px solid #dbdbdb;
border-radius: 10px;*/
}

/*.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1);
}*/
.card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.imgAdd {
position: absolute;
top: -10px;
left: -10px;
width: 32px;
height: 32px;
line-height: 32px;
z-index: 1;
text-align: center;
background: #f5f5f5;
border: 1px solid #CCC;
color: #666;
border-radius: 32px;
font-size: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.has-feedback label ~ .form-control-feedback {
top: 5px;
left: -15px;
border-radius: 30px;
}

.panel-primary > .panel-heading {
color: #fff;
background-color: var(--main-color);
border-color: var(--main-color);
}

.input-group-field {
display: table-cell;
vertical-align: middle;
border-radius: 4px;
min-width: 1%;
white-space: nowrap;
border-left: 1px solid #CCC;
}

.input-group-field .form-control {
    border-radius: inherit !important;
}

.input-group-field:not(:first-child):not(:last-child) {
    border-radius: 0;
}

    .input-group-field:not(:first-child):not(:last-child) .form-control {
        border-left-width: 0;
        border-right-width: 0;
    }

.input-group-field:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.swal-text {
text-align: center;
font-size: 20px !important;
color: #666 !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.swal-title {
font-size: 30px !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.swal-button {
font-size: 18px !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*tabs colors -------------------------------------------*/
.main .grid_menu .red_tab {
color: #c0392b;
}

.main .grid_menu .red_tab:hover {
    background: #c0392b;
    color: #FFFFFF;
}

.main .grid_menu .green_tab {
color: #16a085;
}

.main .grid_menu .green_tab:hover {
    background: #16a085;
    color: #FFFFFF;
}

.main .breadcrumb {
display: none;
}

.main {
padding-left: 12px;
padding-right: 12px;
margin-right: 140px;
}

#colseForm {
display: block;
text-align: center;
font-size: 24px;
margin-top: 15px;
padding-top: 7px;
border-radius: 50px;
color: #666666;
width: 43px;
/*height:33px;*/
margin-left: 0;
float: left;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

#colseForm:hover {
    color: rgba(0,0,0,1);
    background: #EEEEEE;
}

.formHeaderBgRed .formTitle span {
/*color: #FFF !important;*/
}

.formHeaderBgGreen .formTitle span {
/* color: #FFF !important;*/
}

.swal-footer {
text-align: center;
}

.hasNoti {
display: block;
width: 10px;
height: 10px;
background: #c0392b;
border-radius: 10px;
font-size: -999999px;
position: absolute;
top: 16px;
right: 14px;
border: 2px solid #ffffff;
}

.input-group-btn .btn-primary i {
font-size: 16px;
}

#smallSidebar {
position: absolute;
top: 0;
right: -85%;
height: 100%;
width: 85%;
background: #FFF;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-left: 1px solid #DDD;
z-index: 99999;
}

#smallSidebar ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    margin-top: 20px;
}

    #smallSidebar ul li a {
        display: block;
        padding: 10px 15px;
        font-size: 18px;
        color: #333;
        text-decoration: none;
    }

        #smallSidebar ul li a:hover {
            background: #EEE;
        }

        #smallSidebar ul li a i {
            padding-left: 20px;
        }






.mdCheckbox, .mdRadio {
position: relative;
cursor: pointer;
padding: 10px;
}

.mdCheckbox::-moz-selection, .mdRadio::-moz-selection {
    background: transparent;
}

.mdCheckbox::selection, .mdRadio::selection {
    background: transparent;
}

.mdCheckbox input + span, .mdRadio input + span {
    background: #f9f9f9;
    content: "";
    display: inline-block;
    padding: 0;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    border: 2px solid #666;
}

    .mdCheckbox input + span::after, .mdRadio input + span::after {
        content: "";
        display: block;
        -webkit-transform: scale(0);
        transform: scale(0);
        transition: -webkit-transform .2s;
        transition: transform .2s;
        transition: transform .2s, -webkit-transform .2s;
    }

@media screen and (min-width: 768px) {
.mdCheckbox:hover input + span, .mdRadio:hover input + span {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
}

.mdCheckbox input:active + span, .mdRadio input:active + span {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mdCheckbox input:focus + span, .mdRadio input:focus + span {
box-shadow: 0 0 0 3px lightblue;
}

.mdCheckbox input:checked + span::after, .mdRadio input:checked + span::after {
-webkit-transform: scale(1);
transform: scale(1);
}

.mdCheckbox input, .mdRadio input {
position: absolute;
cursor: pointer;
opacity: 0;
}

.mdCheckbox input + span {
    border-radius: 4px;
}

    .mdCheckbox input + span::after {
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
        background-size: contain;
        width: 20px;
        height: 20px;
    }

.mdRadio input + span {
    border-radius: 100%;
}

    .mdRadio input + span::after {
        border-radius: 100%;
        margin: .65em;
        width: .75em;
        height: .75em;
    }

.mdRadio input:checked + span::after {
    background: black;
}

label.mdCheckbox {
margin-bottom: 0;
}

.formBody .container-fluid {
padding: 0;
}

.node h4 {
font-size: 24px;
}

.acc h4 {
font-size: 24px;
}

.scroll4::-webkit-scrollbar {
width: 10px;
}

.scroll4::-webkit-scrollbar-thumb {
background: #666;
border-radius: 20px;
}

.scroll4::-webkit-scrollbar-track {
background: #ddd;
border-radius: 20px;
}

/*------------------------------------------------------------*/
.pure-material-checkbox {
z-index: 0;
position: relative;
display: inline-block;
color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
font-size: 16px;
line-height: 1.5;
}

.pure-material-checkbox + label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
/* Input */
.pure-material-checkbox > input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    z-index: -1;
    position: absolute;
    left: -10px;
    top: -8px;
    display: block;
    margin: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
    box-shadow: none;
    outline: none;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
}

/* Span */
.pure-material-checkbox > span {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

    /* Box */
    .pure-material-checkbox > span::before {
        content: "";
        display: inline-block;
        box-sizing: border-box;
        margin: 3px 11px 3px 1px;
        border: solid 2px; /* Safari */
        border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
        border-radius: 2px;
        width: 18px;
        height: 18px;
        vertical-align: top;
        transition: border-color 0.2s, background-color 0.2s;
    }

    /* Checkmark */
    .pure-material-checkbox > span::after {
        content: "";
        display: block;
        position: absolute;
        top: 4px;
        left: 2px;
        width: 10px;
        height: 5px;
        border: solid 2px transparent;
        border-right: none;
        border-top: none;
        transform: translate(3px, 4px) rotate(-45deg);
    }

/* Checked, Indeterminate */
.pure-material-checkbox > input:checked,
.pure-material-checkbox > input:indeterminate {
    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

    .pure-material-checkbox > input:checked + span::before,
    .pure-material-checkbox > input:indeterminate + span::before {
        border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    }

    .pure-material-checkbox > input:checked + span::after,
    .pure-material-checkbox > input:indeterminate + span::after {
        border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
    }

    .pure-material-checkbox > input:indeterminate + span::after {
        border-left: none;
        transform: translate(4px, 3px);
    }

/* Hover, Focus */
.pure-material-checkbox:hover > input {
    opacity: 0.04;
}

.pure-material-checkbox > input:focus {
    opacity: 0.12;
}

.pure-material-checkbox:hover > input:focus {
    opacity: 0.16;
}

/* Active */
.pure-material-checkbox > input:active {
    opacity: 1;
    transform: scale(0);
    transition: transform 0s, opacity 0s;
}

    .pure-material-checkbox > input:active + span::before {
        border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    }

.pure-material-checkbox > input:checked:active + span::before {
    border-color: transparent;
    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
}

/* Disabled */
.pure-material-checkbox > input:disabled {
    opacity: 0;
}

    .pure-material-checkbox > input:disabled + span {
        color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
        cursor: initial;
    }

        .pure-material-checkbox > input:disabled + span::before {
            border-color: currentColor;
        }

.pure-material-checkbox > input:checked:disabled + span::before,
.pure-material-checkbox > input:indeterminate:disabled + span::before {
    border-color: transparent;
    background-color: currentColor;
}