/* CORE STYLES */
:root {
    --primary-color: rgba(13, 110, 139, 0.75);
    --overlay-color: rgba(24, 39, 51 , 0.85);
    --menu-speed: 0.75s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: irs;
    font-size: 16px;
}

.body {
    background-color: cadetblue;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    /*min-width:1300px;        /* Suppose you want minimum width of 1000px */
    /*width: auto !important;  /* Firefox will set width as auto */
    /*width:1300px;            /* As IE6 ignores !important it will set width as 1000px; */
}
.entrance {
    background: url(../Img/backg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container {
    max-width: 960px;
    margin: auto;
    overflow: hidden;
    padding: 0 3rem;
}

.showcase {
    height: auto;
    position: relative;
    width: 79%;
    margin: 5px auto;
    border-radius: 4px;
}

.showcase:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.showcase .showcase-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.showcase h1 {
    font-size: 4rem;
}

.showcase p {
    font-size: 1.3rem;
}

@font-face {
    font-family: irs;
    font-style: normal;
    font-weight: 400;
    src: url('../font/IRANSans.eot');
    src: url('../font/IRANSans.eot?#iefix') format('embedded-opentype'), /* FF39+,Chrome36+, Opera24+*/ url('../font/IRANSans.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSans.ttf') format('truetype');
}

.meno{
    color: blue;
    text-decoration: none;
    border: 1px solid #BDE5F8;
    border-radius: 2px;
    margin: auto 3px; 
    padding:0px 3px 0px 3px;
}

.login {
    /*width: 25%;*/
    width: 20em;
    height: 250px;
    background: rgba(255, 255, 255, 0.5);
    margin: 10% auto;

}

.delete {
    width: 25em;
    height: 50px;
    padding-right: 10px;
    background: rgba(255, 255, 255, 0.5);
    margin: 5px auto;

}

.register {
    width: 25em;
    height: 420px;
    background: rgba(255, 255, 255, 0.5);
    margin: 30px auto 20px auto;

}

.middle {
    width: 95%;
    background: #fff; 
    padding: 10px;
    margin: 10px auto;
    box-shadow: 0 0 8px #ccc;
    border-radius: 4px;
}

.textbox {
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    padding-left: 12px;
    margin-bottom: 10px;
    border-radius: 3px;
    text-align: center;
}

input::placeholder {
    direction: rtl;
    color: #bdbdbd;
    padding-right: 12px;
}



.label {
    width: 11em;
    margin: 0 auto;
    margin-bottom: 280px;
    border: 1px solid #ccc;
    height: 38px;
    border-radius: 2px;
    text-align: center;
    display: block;
}

.num {
    width:100%;
    color: #212121;
    height: 42px;
    font-size: 18px;
    text-align: center;
    margin: 5px auto;
    border-radius: 2px;
    border: 1px solid #aaa;
    display: block;
}

.tbl {
    border-collapse: collapse;
    width: 100%;
    margin-top:5px;
    margin-bottom:5px; 
    text-align: center;
    direction: rtl;
}

.tbl th{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #00A8A9;
}

.tbl td , .tbl th {
    border: 1px solid #ddd;
    padding-top: 5px;
    padding-bottom: 5px;
   
}

.tbl tr:nth-child(even){background-color: #f2f2f2;}

.tbl tr:hover {background-color: #ddd;}



input::placeholder:hover {
    color: #000;
}

.Valid {
    color: green;
    /*font-size: 12px;*/
}

.register input.Valid {
    background: #dcedc8;
    color: #455a64;
    border-color: #8bc34a;
}

.Invalid {
    color: red;
}

.register input.Invalid {
    background: #ffcdd2;
    color: #ef9a9a;
    border-color: #e53935;
}

.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    padding: 10px 10px;
     margin: 5px 5px;
    border-radius: 2px;
    border: 1px solid #4cae4c;
    direction: rtl;
}

.error {
    color: #D8000C;
    padding: 10px 10px;
    margin:0 5px 0 5px;
    border-radius: 2px;
    background-color: #FFD2D2;
    border: 1px solid #e53935;
    direction: rtl;
}

.info {
    color: #00529B;
    background-color: #bdbdbd;
    padding: 5px 5px;
     margin: 8px 5px;
    border: 1px solid #424242;
    border-radius: 2px;
    text-align: center;
}

.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    padding: 10px 10px;
    margin: 5px 5px;
    border-radius: 2px;
    border: 1px solid #fdd835;
    direction: rtl;
}

.sp {
float: right;
padding-right: 30px;
padding-left: 5px;
text-align: right;
}
.p {
direction: rtl;
text-align: right;
display: block;
color: #004d40;
}

.center {
    width: 300px;
    background: #bdbdbd;
    border-radius: 5px;
    padding: 5px;
    margin: 5px auto;
}
    
.form{
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    border-radius: 5px;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.button:hover {
    color: black;
}
.bt {
    background-color: white;
    color: black;
}

.bt_on_click {
    border-radius: 5px;
    background-color: #2e7d32;
    color: white;
}

.bt_off_click {
    border-radius: 5px;
    background-color: #D21626;
    color: white;
}

.on {
    color: #004d40;
}

.off {
    color: #b71c1c;
}

.btn {
    color: #fff;
    text-align: center;
    /*padding: 6px 30px;*/
    background: cadetblue;
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 0;
    margin-bottom: 10px;
}
.btn:hover {
    transition: all 500ms ease;
    box-shadow: 0 0 25px #ccc;
}
/*
.btn {
    display: inline-block;
    border: none;
    background: var(--primary-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    transition: opacity 1s ease-in-out;
    text-decoration: none;
}

.btn:hover {
    opacity: 0.7;
}
*/
/* MENU STYLES */
.menu-wrap {
    position: fixed;
    top: 10%;
    right: 7.5%;
    z-index: 1;
}

.menu-wrap .toggler {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
}

.menu-wrap .hamburger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: firebrick;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
    position: relative;
    flex: none;
    width: 100%;
    height: 2px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
    top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
    transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
    transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
    visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
    opacity: 1;
    transition:  opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-wrap .menu > div {
    background: var(--overlay-color);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0;
    transition: opacity 0.4s ease;
    width: 500px;
}

.menu-wrap .menu > div > div > ul > li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.2rem;    // compress_ratio
}

.menu-wrap .menu > div > div > ul > li > a {
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px;
    transition-duration: 0.4s;
    cursor: pointer;
    width: 48%;
    float: right;
}
.button1 {
    background-color: green;
    color: white;
    border: 2px solid #4CAF50;
}
.button1:hover {
    background-color: #4CAF50;
}
.button2 {
    background-color: #008CBA;
    color: white;
    border: 2px solid #015b79;
}
.button2:hover {
    background-color: #3bc1ee;
}
.button3 {
    background-color: darkmagenta;
    color: white;
    border: 2px solid #4c014c;
}
.button3:hover {
    background-color: #cd1acd;
}
.button4 {
    background-color: red;
    color: white;
    border: 2px solid darkred;
}
.button4:hover {
    background-color: #f83737;
}
.button5 {
    background-color: orangered;
    color: white;
    border: 2px solid #6d2711;
}
.button5:hover {
    background-color: #f57849;
}
.button6 {
    background-color: deeppink;
    color: white;
    border: 2px solid #6d1153;
}
.button6:hover {
    background-color: #d74c68;
}
.button7 {
    background-color: darkblue;
    color: white;
    border: 2px solid #11206d;
}
.button7:hover {
    background-color: #27277e;
}
.button8 {
    background-color: gold;
    color: white;
    border: 2px solid #6d6111;
}
.button8:hover {
    background-color: #ead24d;
}
.button9 {
    background-color: chartreuse;
    color: white;
    border: 2px solid #176609;
}
.button9:hover {
    background-color: #a7f35b;
}
.button10 {
    background-color: crimson;
    color: white;
    border: 2px solid #80071f;
}
.button10:hover {
    background-color: #d7536e;
}
.button11 {
    background-color: cyan;
    color: white;
    border: 2px solid #0e2f2f;
}
.button11:hover {
    background-color: #94f8f8;
}
.button12 {
    background-color: springgreen;
    color: white;
    border: 2px solid #285a2a;
}
.button12:hover {
    background-color: #5bfcab;
}
.button13 {
    background-color: gray;
    color: white;
    border: 2px solid #285a2a;
}
.button13:hover {
    background-color: #b7b4b4;
}
.button14 {
    background-color: black;
    color: white;
    border: 2px solid #285a2a;
}
.button14:hover {
    background-color: white;
}
.field1 {
    background-color: orangered;
    color: white;
    border: 2px solid darkred;
}
.field1:hover {
    background-color: #fa8357;
    color: black;
    text-decoration: none;
}
.field2 {
    background-color: orange;
    color: white;
    border: 2px solid darkred;
}

.field2:hover {
    background-color: #f8ca77;
    color: black;
    text-decoration: none;
}
p.etitle{
    color: white;
    overflow:hidden;
    text-align: center ;
    font-family: "LM Roman 12", sans-serif;
    font-size: 1.6vw;
    /*font-weight: bold;*/
}
p.ftitle{
    color: white;
    font-size: 2vw;
    overflow: hidden;
    text-align: center ;
    padding: 10px;
    border-bottom: 1px solid white;
}
img.t1{
    width: 9%;
    height: auto;
    float:left;
    padding: 20px 10px;
}
img.t2{
    width: 8%;
    height: auto;
    float:right;
    padding: 20px 10px;
}
.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: -30px;
    left: -2px;
}
img.tower {
    height: 60px;
    width: 50px;
    position: absolute;
    top: -65px;
    left: -14px;
}
.edit{
    width: 100%;
    height: 25px;
}
.editMode{
    border: 1px solid black;
}

/* Table Layout */
table {
    border:3px solid lavender;
    border-radius:3px;
}

table tr:nth-child(1){
    background-color:dodgerblue;
}
table tr:nth-child(1) th{
    color:white;
    padding:10px 0px;
    letter-spacing: 1px;
}

/* Table rows and columns */
table td{
    padding:10px;
}
table tr:nth-child(even){
    background-color:lavender;
    color:black;
}
.welcomefooter{
    width: 100%;
    position: relative;
    bottom: 20px;
    display: block;
}
.welcomefooterContent{
    width: 30%;
    min-width:300px;        /* Suppose you want minimum width of 1000px */
    height: 30px;
    margin: auto;
    text-align: center;
    border: 2px solid #BDE5F8;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.welcomefooterContent a{
    font-size: smaller;
    color: black;
    text-decoration:none;
}
.help{
    position: fixed;
    top: 10%;
    left: 2.5%;
    z-index: 1;
    width: 50px;
}
.wmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 140px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.wclose {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.wclose:hover,
.wclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 140px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    direction: rtl;
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 77%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 15px;
    background-color: royalblue;
    color: white;
    text-align: center;
}

.modal-body {
    padding: 2px 16px;
    text-align: right;
}
.modal-body ul {
    margin: 10px;
}

.modal-footer {
    padding: 2px 5px;
    background-color: royalblue;
    color: white;
    text-align: center;
}
/* Google font */
/* latin */
@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    src: url(../font/Orbitron.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.clock {
    position: relative;
    top: 1vw;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: gold;
    font-size: 1.5vw;
    font-family: Orbitron, sans-serif;
    letter-spacing: 7px;
    text-align: center;
}
.timer {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: lawngreen;
    font-size: 30px;
    font-family: Orbitron;
    letter-spacing: 7px;
}
.content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    direction: rtl;
}
.title_404 {
    font-size: 70px;
    color: red;
}
.h2_404 {
    font-size: 30px;
    font-family: Orbitron;
    color: maroon;
}
.div_404 {
    font-size: 30px;
    color: maroon;
    margin: 5px;
}
.reset{
    position: fixed;
    top: 45%;
    left: 2.7%;
    z-index: 1;
    width: 45px;
}
.back{
    position: fixed;
    top: 52%;
    left: 2.7%;
    z-index: 1;
    width: 40px;
}
.user{
    position: fixed;
    top: 36%;
    right: 2.7%;
    z-index: 1;
    width: 70px;
    text-align: center;
}
.user a{
    text-decoration: none;
    color: white;
}
.user img{
    width: 70px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.canvasjs-chart-toolbar div {
    width: 130px !important;
}
.online{
    position: fixed;
    top: 35%;
    left: 2.7%;
    z-index: 1;
}
.online img{
    width: 45px;
}
.online p{
    padding-left: 18px;
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: #000;
    display: none;
}
#boxes .window {
    position: absolute;
    left: 0;
    top: 0;
    width: 440px;
    height: 100px;
    display: none;
    z-index: 9999;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    direction: rtl;
}
#boxes #dialog {
    width: 450px;
    height: 120px;
    padding: 10px;
    background-color: #ffffff;
    font-family: 'Segoe UI Light', sans-serif;
    font-size: 15pt;
}
#popupfoot {
    font-size: 16pt;
    position: absolute;
    bottom: 0px;
    width: 100px;
    left: 180px;
}
#popupfoot a{
    text-decoration: none;
}
.agree {
    color: green;
}