/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */
i.fa-solid {
   font-size: 0.9em;
}

.wrap {
   margin: 10px;
   padding: 0px;
}

.aitoce-header,
.aitoce-wrapper {
   background: #00a86b;
   border-radius: 8px;
   padding: 0.5rem 1rem 0.1rem 1rem;
   box-shadow: 4px 4px 5px #555;
   margin: 10px 15px 10px 10px;
}

.aitoce-wrapper {
   padding: 0.5rem 1rem .5rem 1rem;
}

.aitoce-admin-header {
   color: #fff;
   text-shadow: 1px 1px 3px #000;
}

.aitoce-admin-header,
.aitoce-wrapper th,
.aitoce-wrapper h1,
.aitoce-wrapper h2,
.aitoce-wrapper h3,
.aitoce-wrapper h4 {
   font-family: Audiowide;
}

.aitoce-header .notice {
   border-radius: 8px;
   border-left-width: 8px;
   box-shadow: -1px -3px 1px #008856, 1px 3px 1px #00dd8c;
   margin: -10px 10px 15px 0px;

   opacity: 1;
   animation-name: fadeInOpacity;
   animation-iteration-count: 1;
   animation-timing-function: ease-in;
   animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.aitoce-section-header,
.aitoce-admin-form h2 {
   text-shadow: 1px 1px 3px #000;
   color: #ffffff;
   padding: 15px;
   background-color: #E98C00;
   border-radius: 6px;
   box-shadow: inset 0 -8px 10px #d58103, -1px -3px 1px #008856, 1px 3px 1px #00dd8c;
}

.aitoce-wrapper table {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: inset 1px 4px 1px #008856, 1px 4px 1px #00dd8c;
}

.aitoce-wrapper .form-table th {
   padding-left: 10px;
}

/* Input fields inside the forms */
.aitoce-admin-form input[type="text"],
.aitoce-admin-form input[type="password"],
.aitoce-admin-form textarea {
   width: 50%;
   padding: 0.1rem 0.3rem;
   margin-top: 0.1rem;
   border: 1px solid #ccc;
   border-radius: 6px;
   background: #fff;
   font-size: 0.8rem;
}

.aitoce-admin-form select {
   margin-top: 0.3rem;
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 0.8rem;
}

.aitoce-description {
   width: 50%;
   font-size: 0.7em;
   margin-left: 10px;
}

/* Submit button */
.aitoce_provider label,
input[type="submit"].aitoce-button,
button[type="submit"].aitoce-button {
   background: #E98C00;
   text-shadow: 1px 1px 3px #000;
   font-weight: bold;
   color: #fff;
   border: none;
   padding: 0.1rem 0.7rem;
   border-radius: 6px;
   box-shadow: inset 0 -8px 10px #d58103, 1px 3px 5px #555;
   font-size: 1rem;
   cursor: pointer;
   transition: background 0.3s;
   margin-top: 10px;
}

.aitoce_provider label:hover,
input[type="submit"].aitoce-button:hover,
button[type="submit"].aitoce-button:hover {
   background: #d58103;
   box-shadow: inset  #a46301;
}

input[type="radio"]:checked + label,
input[type="submit"].aitoce-button:focus,
button[type="submit"].aitoce-button:focus {
   color: #333;
   background: #008252;
   text-shadow: none;
   box-shadow: inset 0 -10px 15px #007148;

}

input[type="radio"]:checked + label {
   color: #fff;
}

/*
 * Style radio buttons
 */
.aitoce_provider {
   margin-top: 25px;
}

.aitoce_provider li{
   display: inline;
}

.aitoce_provider label {
   display: inline;
   margin-right: 20px;
   padding: 20px;
   vertical-align: inherit;
}

input[type="radio"] {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px !important;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   width: 1px !important;
}

input[type="radio"] + label {
   color: #fff;
   vertical-align: inherit;
}

input[type="radio"]:checked + label {
   display: inline;
   margin-right: 20px;
   padding: 20px;
   vertical-align: inherit;
}

#aitoce-settings-buttons {
    margin-bottom:-20px;
}

/* Header
*/
#aitoce-icon {
   width: 98%;
   text-align: right;
   margin-top: 10px;
   margin-bottom: -45px;
}

/* Footer
*/
.aitoce-version {
   width: 98%;
   color: #fff;
   font-weight: bold;
   text-shadow: 1px 1px 2px #000;
   text-align: right;
   margin-top: -50px;
   margin-bottom: 15px;
}



.aitoce-free,
.aitoce-basic,
.aitoce-advanced,
.aitoce-domain,
.aitoce-no-membership {
   color: #000;
   margin-right: 5px;
   padding: 6px 15px 10px 15px;
   border: 1px solid #555;
   border-radius: 5px;
   font-size: 1.2em !important;
   font-weight: 900;
   letter-spacing: 2px;
   line-height: 1.5em;
   text-wrap: none;
   box-shadow: 2px 3px 4px #555;
}

.aitoce-no-membership {
   margin-bottom: 40px;
   background-color: #fa2626;
   text-shadow: 2px 2px 3px #f16565;
}

.aitoce-free {
   background-color: #aaaaaa;
   text-shadow: 2px 2px 3px #706e6e;
}

.aitoce-basic {
   background-color: #8ed1fc;
   text-shadow: 2px 2px 3px #6393b1;
}

.aitoce-advanced {
   background-color: #ffe97d;
   text-shadow: 2px 2px 3px #b2a357;
}

.aitoce-domain {
   margin-bottom: 40px;
   background-color: #c9bff0;
   text-shadow: 2px 2px 3px #9683EC;
}

#aitoce-copy-domain,
#aitoce-membership-upgrade {
   cursor: pointer;
   padding-left: 10px;
   font-size: 1.4em !important;
}

.aitoce-agent-count-header {
   font-size: 2em;
}

.aitoce-agent-count {
   font-size: 2em;
   font-weight: bold;
}

.aitoce-green {
   color: #0dd068;
}

.aitoce-jade {
   color: #00a86b;
}

.aitoce-orange {
   color: #FD9800;
}

.aitoce-yellow {
   color: #fff000;
}

.aitoce-blue {
   color: #1E88E5;
}

.aitoce-indigo {
   color: #9683EC;
}

.aitoce-red {
   color: #ff0000;
}




/*
 * Agent admin pages
*/
.aitoce-agent-list-container {
   display: flex;
   flex-direction: row;
}

.aitoce-agent-list {
   margin-right: 20px;
   margin-bottom: 10px;
   flex-grow: 4;
}



/*
 * Popup agent - Agent selector - List page
 */

.aitoce-agent-popup {
   margin-bottom: 15px;
}

#form-widget-table {
   width: 275px;
}

#form-widget-table th {
   width: 33%;
   padding-right: 3px;
}

#form-widget-table td {
   width: 66%;
   padding-left: 10px;
   padding-right: 10px;
}





/*
 * Agent list Description column output
 */
.widefat .agent_description {
   font-size: 0.8em;
}

/*
 * Agent list Style column output
 */
.aitoce-wrapper td.agent_styling {
   padding-left: 0;
}

.column-agent_styling {
   width: 80px;
}

.aitoce-style-header {
   width:61px;
   height:20px;
   padding-left:10px;
   border-left:1px solid #ddd;
   border-top:1px solid #ddd;
   border-right:1px solid #ddd;
}

.aitoce-style-background {
   width:65px;
   height:30px;
   padding: 3px;
   border-left:1px solid #ddd;
   border-right:1px solid #ddd;
   border-bottom:1px solid #ddd;
}

.aitoce_style_client {
   width:35px;
   height:10px;
   border-radius:3px;
   margin:0 0 0 28px;
}

.aitoce_style_nimbot {
   width:40px;
   height:14px;
   border-radius:3px;
   margin:4px 0 0 2px;
}

.aitoce_style_button {
   width:15px;
   height:10px;
   border-radius:3px;
   margin:-10px 0 0 48px;
}

/*
 * NimBot Agent list
 */

table.widefat {
   border: none;
}

/************************* leave below ********************/
/*
 * Style the check box
 */
.switch {
   position: relative;
   display: inline-block;
   width: 36px;
   height: 22px;
   margin: 0 0 10px;
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ffaeae;
   -webkit-transition: .4s;
   transition: .4s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
   left: -3px;
   bottom: -1px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
   border: 3px solid #555;
}

input:checked + .slider {
  background-color: #44d39f;
}

/*input:focus+.slider {
   box-shadow: 0 0 1px #00a86b;
}*/

input:checked+.slider:before {
   -webkit-transform: translateX(18px);
   -ms-transform: translateX(18px);
   transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
   border-radius: 34px;
   border: 2px solid #555;
   box-shadow: 2px 3px 4px #555;
}

.slider.round:before {
   border-radius: 50%;
}

/*
 * Style the select box
 */
/*the container must be positioned relative:*/
.aitoce-select-box {
   position: relative;
   font-family: Arial;
   width: 50%
}

.aitoce-select-box select {
   display: none;
   /*hide original SELECT element:*/
}

.select-selected {
   background-color: #2db583;
   border-radius: 10px;
   box-shadow: 2px 3px 4px #555;
}

.aitoce-select-box-green {
   background-color: #555;
   border-radius: 10px;
   box-shadow: 2px 3px 4px #555;
}

/*style the arrow inside the select element:*/
.select-selected:after {
   position: absolute;
   content: "";
   top: 14px;
   right: 10px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
   border-color: transparent transparent #fff transparent;
   top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
   color: #ffffff;
   padding: 8px 16px;
   border: 1px solid transparent;
   border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
   cursor: pointer;
   user-select: none;
   border-radius: 10px;
   border: 2px solid #555;
}

/*style items (options):*/
.select-items {
   position: absolute;
   background-color: #00a86b;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 99;
   border-radius: 10px;
}

/*hide the items when the select box is closed:*/
.select-hide {
   display: none;
}

.select-items div:hover,
.same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 782px) {
   .form-table td {
      padding: 4px 10px 6px;
   }
   
   .aitoce-description {
      width: 100%;
   }

   .aitoce-agent-list-container {
      flex-direction: column;
   }

   .aitoce-agent-list {
      margin-right: 0;
   }

   #form-widget-table,
   #form-widget-table th {
      width: 100%;
   }

   .aitoce-select-box {
      position: relative;
      font-family: Arial;
      width: 100%;
   }

   .form-table td .aitoce-select-box select {
      display: none;
      /*hide original SELECT element:*/
   }
}