:root {
    --primary: #6797BF;
    --secondary: #8CB0CE;
    --light-grey: #eee;
    --grey: #c6c6c6;
    --dark-grey: #666;
}

body {
    position: relative;
    margin: 0px;
    color: #000;
    font-size: 12px;
    font-family: sans-serif, Arial, Calibri, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.42857143;

}

section {
    padding: 2px 0px;

}

p {
    font-size: 13px;
    word-break: initial;
}

hr {
    border: 1px solid #c6c6c6;
}


.bg-grey{
    background-color: var(--grey);
}
.bg-gray,.bg-dark-grey{
    background-color: var(--light-grey);
}

.bg-blue {
    background-color: #6699cc !important;

}

.bg-yellow {
    background-color: #f2ea08 !important;

}

.wrapper {
    width: 100%;
    margin: 0px;
}
.container {
   height: auto;
    width: 1023px;
    margin: auto;
    padding: 5px;
    min-height:calc(100vh - 35px);


}
.text-red {
    color: red !important;
}

.text-blue {
    color: var(--primary) !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

img {
    cursor: pointer;
}

.img-responsive {
    max-width: 100%;
    display: block;
    height: auto;
}
img.icon{
    width: 18px !important;
}

/*Fields*/
input[type="checkbox"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0;
    background: #f8f9fa;
    height: 14px;
    width: 14px;
    border: 1px solid #343a40;

}

input[type="checkbox"]:checked {
    background: #fff;

}

input[type="checkbox"]:hover {
    filter: brightness(90%);
}

input[type="checkbox"]:disabled {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

input[type="checkbox"]:after {
    content: "\2713";
    position: relative;
    left: 1px;
    font-size: 12px;
    bottom: 2px;
    font-weight: 600;
    display: none;

}

input[type="checkbox"]:checked:after {
    display: block;
}

input[type="checkbox"]:disabled:after {
    border-color: #7b7b7b;
}

label, b {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    line-height: 1.6;

}

input[type="text"], input[type="number"], input[type="number"], input[type="date"], input[type="email"], input[type="password"],select {
    width: 100%;
    min-height: 26px;
    padding: 0px 5px;
    border: 2px solid var(--light-grey);

}
/*remove the icon in number input*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
strong {
    font-weight: 600;
    font-size: 16px;
    color: #333;

}

textarea {
    width: 100%;
    border: 2px solid var(--light-grey);
}

/*placeholder*/
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 12px;
}

input::-moz-placeholder { /* Firefox 19+ */
    font-size: 12px;
}

input:-ms-input-placeholder { /* IE 10+ */
    font-size: 12px;
}

input:-moz-placeholder { /* Firefox 18- */
    font-size: 12px;
}

/*End Of Fields*/

/*Header*/
.header {
    min-height: 50px;
    position: relative;

}

.header .title, .header .search-btn {
    height: 5.5em;
    display: flex;
    align-items: center;
    justify-content: center

}

.header h4 {
    margin: 0px;
    font-size: 34px;
    color: #6797BF;
    float: left;

}

.header h4 a {
    color: #6797BF;
    text-decoration: none;
}

.header .search-btn img {
    margin: 0%;

}

/*End Of Header*/

/*box*/

.box .box-header {
    min-height: 20px;
    background-color: var(--primary);
}

.box .box-header h3:after {
    content: "";
    display: block;
}

.box .box-header .nav-bar {
    float: right;
    margin-top: -30px;
    margin-right: -2px;
}

.box .box-header .nav-bar ul {

    list-style-type: none;
    display: flex;
    justify-content: flex-end;

}

.box .box-header .nav-bar ul li a {
    height: 30px;
    background-color: #4c7394;
    border: 2px solid #4c7394;

    border-radius: 25% 25% 0 0%;
    color: #fff;
    padding: 5px 28px;

    margin-left: 5px;
    text-decoration: none;
}

.box .box-header .nav-bar ul li a.active, .box .box-header .nav-bar ul li a:hover {
    background-color: var(--primary);
    border: 2px solid var(--primary);
}

.box .box-content {
    padding: 5px;
    border: 2px solid var(--light-grey);
    position: relative;
}

.box .box-content p {
    margin: 0;
    line-height: 1.5;

}

.box .box-content-header h3 {
    font-size: 46px;
    color: #6797BF;
    margin: 0;
}

.box .box-content-header p {
    font-size: 16px;
    color: var(--secondary);
    margin: 0;
}

.box .box-content form label, .box .box-content b {
    float: right;

}

.box .box-content form .check-label ,.box .box-content form .checkbox,.box .box-content form .radio  {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.box .box-content .img-buttons {
    position: absolute;
    bottom: 0;
    right: 5px;
}

.box .box-content .img-buttons a {
    display: block;
    margin: 2px 0px;
}
.box .box-content .view{
    position: relative;
}
.box .box-content .view .back-btn{
    position: absolute;
    top:0;
}
.box .box-content .view .submit-btn{
    position: absolute;
    bottom:0;
}

/*End of box*/

/*Sent Box*/
#sent{
    width: 420px;
}
#sent .close {
    float: right;
    margin-right: 5px;
    color: #ffffff;
    cursor: pointer;
}

#sent .close:hover {
    color: #333;
}

#sent .box-header {
    text-align: center;
    min-height: 20px;
    background-color: var(--primary);
}

#sent .box-content {

    border-color: var(--primary);
    padding: 5px 15px;
}

#sent .box-content-header h3 {
    font-size: 46px;
    padding: 0px;
    margin: 0;
}

#sent .box-content .order-info {
    display: flex;
}

.box .order-info p {
    font-size: 16px;
    color: var(--secondary);
    margin: 0;
}

/*End of Sent Box*/

/*table*/
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
    table-layout: fixed;

}

th, td {
    padding: 2px 5px;
}

table tr {

    border: none;
}

table td {
    word-break: break-all;
}

table td a {
    float: right;
}

table input[type="checkbox"]:after {
    bottom: 2px;
}

table td img {
    margin: 2px;
}
/*horizontal line*/
table td hr{

    border-color: var(--light-grey);


}
#list table tbody tr:nth-child(odd){
    background-color: var(--light-grey);
}
#list table body tr:nth-child(even){
    background-color: #fff;
}
/*Sent Box*/
#sent .close {
    float: right;
    margin-right: 5px;
    color: #ffffff;
    cursor: pointer;
}

#sent .close:hover {
    color: #333;
}

#sent .box-header {
    text-align: center;
    min-height: 20px;
    background-color: var(--primary);
}

#sent .box-content {

    border-color: var(--primary);
    padding: 5px 15px;
}

#sent .box-content-header h3 {
    font-size: 38px;
    padding: 0px;
    margin: 0;
}

#sent .box-content .order-info {
    display: flex;
}

.box .order-info p {
    font-size: 16px;
    color: var(--secondary);
    margin: 0;
}

/*End of Sent Box*/
/*End of Table*/
/*login*/
.login {

    position: absolute; /* 2 */
    top: 40%;
    left: 50%; /* 3 */
    transform: translate(-50%, -50%); /* 4 */
    width: 300px;
    margin: auto;

}

.box.login {
    border: 2px solid #c6c6c6;
    border-radius: 4px;
    padding: 0px;

}

.login input {
    border: 2px solid #c6c6c6;

}

.login form {
    display: block;
    width: 220px;
    margin: auto;
    height: 320px;
}

.login label {
    float: none !important;
}

.login .password {
    position: relative;
}

.login span.icon {
    position: absolute;
    margin-left: 5px;

}

.login [class*="col-"] {

    padding: 10px 5px;
}

/*End of Login*/

/*gsa- tracking*/
.gsa-tracking {
    margin-top: 15px;


}

.gsa-tracking .header {
    min-height: 30px;
    position: relative;
}

.gsa-left, .gsa-right {
    display: block;
    padding: 5px 10px;

    min-height: 500px;
}

.gsa-left .logo-bars {
    margin-top: 10px;
}

.gsa-right .header h3 {
    font-size: 32px;
    margin: 0px 0px 10px 0px;
    min-height: 20px;

}

.gsa-tracking .info {
    margin-top: -15px;
}

.gsa-tracking .info p {
    font-size: 14px;
    margin: 6px 0px;
    line-height: 1.2;
    word-break: initial;

}

/*Footer*/
footer {

    display: block;
    text-align: center;
    background-color: var(--dark-grey);
    width: 100%;
    height: 35px;

}

footer p {
    margin: 0px;
    padding: 8px 0px;
    color: #fff;
}

/*End of footer*/