/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -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;
  margin-left:auto;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  /*background-color: #eee;*/
  background-color: #4f5b66;
}



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

/* 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: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #a7adba;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

div.sticky {
  position: sticky;
  top: 0;
  
  padding: 5px;

  
}


.actionButton{
  /*float:right;*/
  /*border: 2px solid;*/
  padding:5px;
  border-radius: 100px;
  background-color:#4f5b66;
  color:#a7adba;
  text-align:center; 
  width:98%;
  margin-left:auto;
  margin-right:auto;

}

.actionButton2{
  width:100%;
  margin:auto;
}

.validateNumber{
  font-size:18px;
}


.infovisi{
  display: none;
 }

 textarea{
  margin: 10px 0px 10px 0px ;
  max-width: 100%;
  height: 100px;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
  border: none;    
  resize: none;
  outline: none;
  }

  

body {
    font-family: 'Helvetica Neue', Helvetica, Arial;
    font-size: 16px;
   
    background: #343d46;
    
    }
    /*font1*/
    @font-face {
    font-family: SpecialElite;
    src: url(../fonts/SpecialElite.ttf);
    }
    @font-face {
    font-family: SpecialElite;
    src: url(../fonts/SpecialElite.ttf);
    }
    @font-face {
    font-family: SpecialElite;
    src: url(../fonts/SpecialElite.ttf);
    }
    @media screen and (max-width: 580px) {
    body {
    font-size: 16px;
    line-height: 22px;
    }
   
    
       
     
    }
    .tableWrapper{
        margin: 0 auto;
        }
        .table {
        margin: 0 0 0px 0;
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        display: table;
        }
        @media screen and (max-width: 580px) {
        .table {
        display: block;
        }
        }
        .row {
        display: table-row;
        background: #e2e5e9;
        color: #404040;
       
        }
        .row:nth-of-type(odd) {
        background: #f1f2f4;
        color: #404040;
        }
        .row.header {
        font-weight: 900;
        color: #f1f2f4;
        background: #343d46;
        }
        .row.green {
        background: #27ae60;
        }
        .row.blue {
        background: #2980b9;
        }
        @media screen and (max-width: 580px) {
        .row {
        padding: 14px 0 7px;
        display: block;
        }
        .row.header {
        padding: 0;
        height: 6px;
        }
        .row.header .cell {
        display: none;
        }
        .row .cell {
        margin-bottom: 10px;
        }
        .row .cell:before {
        margin-bottom: 3px;
        content: attr(data-title);
        min-width: 98px;
        /*font-size: 10px;*/
       line-height: 10px;
        font-weight: bold;
        text-transform: uppercase;
        color: #969696;
        display: block;
        }
        }
        .cell {
        padding: 6px 12px;
        display: table-cell;
        font-family: SpecialElite;
        }
        .cell1{
        width:80%;
        padding-top:15px;
        padding-bottom:15px;
        }
        .cell2{
        width:15%;
        text-align:left;
        }
        .cell3{
        width:22%;
        text-align:right;
        }
        @media screen and (max-width: 580px) {
        .cell {
        padding: 2px 16px;
        display: block;
        }
        .cell1{
        width:80%;
        text-align:center;
        } 
        .cell2{
        width:80%;
        text-align:center;
        }
        .cell3{
        width:80%;
        text-align:center;
        }
        }
        .mainWrapper{
          clear:both;
        
    
        /*
        border-style: solid;
        border-width: 1px;
        */
        }
    
        .info1{ 
    
        }
        .info1a{ 
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top:20px;
        
        }
        @media screen and (max-width: 580px) {
        .info1a{ 
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top:20px;
        
        }
        }
        .info1b{ 
        font-family: SpecialElite;
        font-size:36px;
        text-align:center;
        margin: 20px 0 10px 0 ;
        color:#a7adba;
        }
        .info2{
            font-family: SpecialElite;
        text-align:center;
        margin:40px 0px 20px 0px;
        font-size:24px;
        width:98%;
        color:#a7adba;
        margin:1%;
        }
    
        .info3{
            font-family: SpecialElite;
        font-size:24px;
        margin:20px 0px 20px 0px;
        text-align:center;
        width:98%;
        color:#a7adba;
        margin:1%;
        }
    
        .info4{
        display: block;
        margin-left: auto;
        margin-right: auto; 
        width: 50%;
        text-align:center;
        margin-top:10px;
        margin-bottom:10px;
        }
        .meniWrapper{
    
        }
        .footer{
        text-align:center;
        color:#8c8c8c;
        margin:20px 0 20px 0 ;
        }
        /*inside elements style*/
        .collapsible {
        background-color: #4f5b66;
        color: #a7adba;
        font-family: SpecialElite;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 16px;
      
        }
        .collapsible:after {
        content: '\002B';
        color: #a7adba;
        font-weight: bold;
        float: right;
        margin-left: 5px;
        }
        .activeC:after {
        content: '\2212';
        }
        .content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
        }
        .fa {
        padding: 10px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 100px;
        background: #a7adba;
        color: #4f5b66;
        }
        .fut{
        color:#000000;
        background-color:#ffffff;
        box-shadow: 0px 0px;
        font-size:20px;
        opacity: 0.3;
        width: 20px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 100px;
        }
        .fut2{
        padding:2px 5px 2px 5px;
        color:#000000;
        background-color:#ffffff;
        box-shadow: 0px 0px;
        font-size:20px;
        opacity: 0.3;
        width: 20px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 100px;
        }
      
        @media screen and (max-width: 580px) {
        .subMeni{
            display:none;
           }
        }
        .order{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding: 5px 5px;
            text-decoration: none;
            margin: 4px 4px 4px 4px;
            cursor: pointer; 
            font-family: SpecialElite;
            
          }

          .orderk{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding: 5px 5px;
            text-decoration: none;
            margin: 4px 4px 4px 4px;
            cursor: pointer; 
            font-size:18px;
            font-family: SpecialElite;
          }
          
          .orderi{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding: 5px 5px;
            text-decoration: none;
            margin: 4px 4px 4px 4px;
            cursor: pointer; 
            font-size:18px;
            font-family: SpecialElite;
          }
          
          .orderr{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding: 5px 5px;
            text-decoration: none;
            margin: 4px 4px 4px 4px;
            cursor: pointer; 
            font-size:18px;
            font-family: SpecialElite;
          }
          
          .orderko{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding: 5px 5px;
            text-decoration: none;
            margin: 4px 4px 4px 4px;
            cursor: pointer; 
            font-size:18px;
            font-family: SpecialElite;
          }
          
          .order2{
            background-color: #4f5b66;
            color: #a7adba;
            border: none;
            padding:20px ;
            text-decoration: none;
           margin-bottom:30px;
            cursor: pointer; 
            font-size:18px;
            width:100%;
            font-family: SpecialElite;
          }

          /* The Modal (background) */
          .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          /* padding-bottom: 100px; 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 */
          -webkit-animation-name: animatetop;
          -webkit-animation-duration: 1s;
          animation-name: animatetop;
          animation-duration: 0.4s;
          text-align:center;
          }
          /* Add Animation */
          @-webkit-keyframes animatetop {
          0% {opacity: 0;}
          100% {opacity: 1;}
          }
    
          @keyframes animatetop {
          0% {opacity: 0;}
          100% {opacity: 1;}
          }
          .modal-body {
          padding: 2px 16px;
          background-color:#f1f2f4;
          text-align:center;
          }
    
          .modal-header {
          padding: 2px 16px;
          background-color: #4f5b66;
          color: #a7adba;
          height:50px;
          }
    
          .modal-footer {
          padding: 2px 16px;
          background-color: #4f5b66;
          color: #a7adba;
          }
          /* Modal Content */
          .modal-content {
          background-color: #f1f2f4;
          color: #343d46;
          margin: auto;
          border: 1px solid #888;
          width: 80%;
          margin: 15% auto;
          /*overflow:scroll;max-height:500px;*/
          }
    
          /* The Close Button */
          .close {
          color: #a7adba;
          float: right;
          margin-right:20px;
          margin-top:20px;
          font-size: 28px;
          font-weight: bold;
          }
    
          .close:hover,
          .close:focus {
          color: #f1f2f4;
          text-decoration: none;
          cursor: pointer;
          }
          
          /* The Close Button */
          .closek {
          color: #a7adba;
          float: right;
          margin-right:20px;
          margin-top:20px;
          font-size: 28px;
          font-weight: bold;
          }
    
          .closek:hover,
          .closek:focus {
          color: #f1f2f4;
          text-decoration: none;
          cursor: pointer;
          }
          
          /* The Close Button */
          .closei {
          color: #a7adba;
          float: right;
          margin-right:20px;
          margin-top:20px;
          font-size: 28px;
          font-weight: bold;
          }
    
          .closei:hover,
          .closei:focus {
          color: #f1f2f4;
          text-decoration: none;
          cursor: pointer;
          }
          
          /* The Close Button */
          .closer {
          color: #a7adba;
          float: right;
          margin-right:20px;
          margin-top:20px;
          font-size: 28px;
          font-weight: bold;
          }
    
          .closer:hover,
          .closer:focus {
          color: #f1f2f4;
          text-decoration: none;
          cursor: pointer;
          }
          
          /* The Close Button */
          .closeko {
          color: #a7adba;
          float: right;
          margin-right:20px;
          margin-top:20px;
          font-size: 28px;
          font-weight: bold;
          }
    
          .closeko:hover,
          .closeko:focus {
          color: #f1f2f4;
          text-decoration: none;
          cursor: pointer;
          }

          .process1{
            font-size:18px;
            font-weight:bold;
            color:#343d46;
          }
         
          input[type='number']{
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield;
            }
            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            }
            .number-input {
            border: 2px solid #ddd;
            display: inline-flex;
            }
            .number-input,
            .number-input * {
            box-sizing: border-box;
            }
            .number-input button {
            outline:none;
            -webkit-appearance: none;
            background-color: transparent;
            border: none;
            align-items: center;
            justify-content: center;
            width: 2em;
            height: 4em;
            cursor: pointer;
            margin: 0;
            position: relative;
            }
            .number-input button:before,
            .number-input button:after {
            display: inline-block;
            position: absolute;
            content: '';
            width: 1em;
            height: 0.2em;
            background-color: #212121;
            transform: translate(-50%, -50%);
            }
            .number-input button.plus:after {
            transform: translate(-50%, -50%) rotate(90deg);
            }
            .number-input input[type=number] {
            font-family: SpecialElite;
            max-width: 6em;
            padding: 1em;
            border: solid #ddd;
            border-width: 0 0.1em;
            font-size: 1.8em;
            height: 2.2em;  
            text-align: center;
            }
            .popText{
              font-family: SpecialElite;
              font-size: 24px;
            }
            .popText2{
              font-family: SpecialElite;
              font-size: 18px;
            }

            a.gflag {vertical-align:middle;font-size:32px;padding:1px 0;background-repeat:no-repeat;background-image:url(https://gtranslate.net/flags/32.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(https://gtranslate.net/flags/32a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}



.topnav {
  overflow: hidden;
  background-color: #81d0e8;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #71a1d1;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.updateMeni{
background-color: #81d0e8;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
min-width:200px;
font-size:16px;
}

.updateMeni:hover {
  background-color: #71a1d1;
}

.updateMeni2{
background-color: #81d0e8;
border: none;
color: white;
padding: 5px 15px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
min-width:50px;
font-size:16px;
}
.updateMeni2:hover {
  background-color: #71a1d1;
}



.updateMeni3{
  margin-left: auto;
  margin-right: auto;
  width:400px;
  text-align:center;
}

.inputText{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.updateCatIte{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte:hover {
  background-color: #71a1d1;
}

.updateCatIte2{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte2:hover {
  background-color: #71a1d1;
}

.updateCatIte3{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte3:hover {
  background-color: #71a1d1;
}

.updateCatIte4{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte4:hover {
  background-color: #71a1d1;
}

.updateCatIte6{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte6:hover {
  background-color: #71a1d1;
}

.updateCatIte7{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte7:hover {
  background-color: #71a1d1;
}

.updateCatIte8{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte8:hover {
  background-color: #71a1d1;
}

.updateCatIte3A{
  width: 100%;
  background-color: #81d0e8;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.updateCatIte3A:hover {
  background-color: #71a1d1;
}

.modalUpdate {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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 */

	-webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s


}

/* Modal Content/Box */
.modal-contentUpdate {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

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

.closeUpdate:hover,
.closeUpdate:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.closeUpdate2 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeUpdate2:hover,
.closeUpdate2:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.closeUpdate4 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeUpdate4:hover,
.closeUpdate4:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 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}
}

input[type=file]::file-selector-button {
  background-color: #81d0e8;
border: none;
color: white;
padding: 5px 15px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
min-width:50px;
font-size:16px;
}

input[type=file]::file-selector-button:hover {
  background: #71a1d1;
}

.mesageAlert{
color:#e60000;
font-weight: 200;
}
.mesagePass{
color:#00b300;
font-weight: 200;
}