.my_wrapper{
    width: 1150px !important;
    /*background-color:  #a0a0a0;*/
    background-color: #d8dae0;
   /* background-color: #c1d7e3; */
    align-content: center;
    font-size: 11px;
    font-weight: normal;
    color: #464646;
    z-index: 1;
    text-decoration: none;
    /*background-color: #F0F0F0;*/
    margin-right: auto;
    margin-left: auto;
   /* width: 1015px;*/
    height: max-content;
}
.my-header{
    margin-top:20px;
    padding-left:10px;
    padding-top:1px;
    height: 180px !important;
    width: auto;
    background-color: white;
    margin-bottom: 20px;
}
.my-header-name {
    margin-top: 10px;
    float: left;
    padding-left:  5px;
    font-size: large;
}
.my-logo {
    margin-top: 10px;
    float: right;
    padding-left:  55px;
    padding-right: 40px;
    height: 150px;
}
.menubox{
    padding-left: 7px;
    align-content: center;
    float:left;
    width:175px;
    /*background-color: #9eb5e0;*/
    /*background-color: #757575; */
    height: auto;
}
.content-box{
    padding-right: 7px;
    padding-bottom: 7px;
    height: auto;
    float:right;
    width:952px;
    /*background-color: #9eb5e0;*/
    /*background-color: #757575; */
}
.displaybox{
    align-content: center;
    float:right;
    width:1149px;
    background-color: #d8dae0;
    /*background-color: #9eb5e0;*/
    /*background-color: #757575; */
    height: auto;
    /*border: 2px solid #c8cacf;*/
}
.breadcrumbs {
    height:40px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 13px;
    color: #FFF;
    border-radius: 4px;
    padding-left: 40px;
    background-color: #9eb5e0;
}
.breadcrumbsy {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;

}
.breadcrumbs > li {
    display: inline-block;
}
.breadcrumbs > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
.breadcrumbs > .active {
    color: #777;
}
.layout-top-nav{
    width:85% !important;
}

.wrapper{
    /* margin-left: 100px; */
    margin-top: 30px;
    font-size: 85% !important;
    width: 1150px !important;
    height: 100% !important;
}
.my-main-content{
    padding-left: 5px;
    padding-right: 5px;
    /*background-color: white; */
    /*border: 5px solid #FFF;*/
}
.wrapper_footer{
    /* margin-left: 100px; */
    padding-top: 10px;
    clear:right;
    margin-top: 20px;
    width: auto !important;
    height: 40px !important;
    background-image: linear-gradient(gray, white);
}
.wrapper input{
    font-size: 100% !important;
}
.wrapper select{
    font-size: 100% !important;
}
.wrapper legend{
    font-size: 120% !important;
}
.wrapper_1{
    /* margin-left: 100px; */
    margin-top: 30px;
    width: 1150px !important;

}
#blink{

    animation-duration: 700ms;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}


@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

table.gridtable{
    margin: 0 auto;
    width: 100%;
    overflow: auto;
    font-size:12px;
    color:#333333;
    border-width: 1px;
    border-collapse: collapse;
}

table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #0b97c4;
    color: white;
}
table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table.gridtable td {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: #666666;
}

.zoom:hover {
    transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    background-color: blue !important;
}
.error {
    color: white;
    background-color: red;
}
.hide{
    display: none;
}
.table-bordered{
    border: black;
}
@media screen and (max-width: 600px) {
    .my_wrapper.wrapper .wrapper_footer .wrapper_1 {
        width: 100%;
    }
}

/*CSS FOR THE SIDE MENU*/
#side ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
   /* background-color: white;*/
    font-size: small;
}

#side    li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: 2px solid #f7f9ff;
}

/* Change the link color on hover */
#side li a:hover {
    background-color: #555;
    color: white;
}
#side .active {
    background-color: #4CAF50;
    color: white;
}


.errorpopup{
    display: block;
    font-size:13px;
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #D8000C;
    background-color: #FFBABA;
    font-weight: bold;
}

.successpopup{
    display: block;
    font-size:13px;
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #4F8A10;
    background-color: #DFF2BF;
    font-weight: bold;
    width: 100%;
}

.warningpopup{
    display: block;
    font-size:13px;
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #8A6010;
    background-color: #F9D678;
    font-weight: bold;
    width: 100%;
}

.noticepopup{
    display: block;
    font-size:13px;
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #00529B;
    background-color: #BDE5F8;
    font-weight: bold;
}
.toolbar {
    height:50px;
    width: 100%;
    z-index: 2;

    padding-right: 0px;
    color: #464646;
    padding-left: 40px;
    font-size: 10px;
    background-color: #EEEEEE;
    margin-bottom: 10px;
    font-weight: bold;
    margin-top: 10px;
}
.toolbar div{
    width: 100px;
    float: left;
    height: 22px;
    border-right: 2px solid #d8dae0;
    text-align: center;
}
.userpicture{
    margin-top:25px;
    float:right;
    width:190px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
}
.mybutton{
    color: #FFF;
    font-weight: bold;
    border: 0px none;
    padding: 5px;
    width: 180px;
    height: 40px;
    font-size: 15px;
    background-color: #6297C3;
}

/*

CSS FOR THE CHECK BOX
 */
/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*Blink for Webkit and others */
@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
}
.blink{
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}

/*--------------------------------------*/
/*------- Action Confirm Box CSS -------*/
/*--------------------------------------*/

.dialog-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}
.dialog-ovelay .dialog {
    width: 300px;
    margin: 100px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 3px;
    overflow: hidden
}
.dialog-ovelay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5
}
.dialog-ovelay .dialog header h3 {
    font-size: 14px;
    margin: 0;
    color: #555;
    display: inline-block
}
.dialog-ovelay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px
}
.dialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}
.dialog-ovelay .dialog .dialog-msg {
    padding: 12px 10px
}
.dialog-ovelay .dialog .dialog-msg p{
    margin: 0;
    font-size: 12px;
    color: #333
}
.dialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px 10px
}
.dialog-ovelay .dialog footer .controls {
    direction: rtl
}
.dialog-ovelay .dialog footer .controls .button {
    padding: 5px 15px;
    border-radius: 3px;
    float: right;
    width: 35%;
}
.button {
    cursor: pointer
}
.link {
    padding: 5px 10px;
    cursor: pointer
}


/*---------------------------*/
/*------- Buttons CSS -------*/
/*---------------------------*/
.button {
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 4px 2px 0px 0px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius:5px;
}
.button:hover, .button:focus-visible{
    transform:translateY(-0.35rem);
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;
    padding: 5px 10px;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
    
}

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    padding: 5px 10px;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}
.button3 {
    background-color: white;
    color: black;
    border: 2px solid #D8000C;
    padding: 5px 10px;
}

.button3:hover {
    background-color: #D8000C;
    color: white;
}
.button4 {
    background-color: white;
    color: black;
    border: 2px solid #d84400;
    padding: 5px 10px;
}

.button4:hover {
    background-color: #d84400;
    color: white;
}

.mydivider{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.label{
    font-size:12px;
}
/*---------------------------*/
/*------- PANEL HEADER -------*/
/*---------------------------*/
.panel-heading{
    font-size:15px;
    text-align: center;
    
}
.panel-heading small{
    font-size:12px;
}
.panel-heading select,input{
    border-radius:10px;
}