@font-face {
   font-family: 'iransans';
   src: url("../fonts/IRANSans/IRANSansWeb.ttf") format("TrueType"),
     url("../fonts/IRANSans/IRANSansWeb\(FaNum\).woff") format("woff"),
     url("../fonts/IRANSans/IRANSansWeb.eot?iefix") format("embedded-opentype");
 }

 * {
   font-family: 'iransans' !important;
   font-size: 12px;
   color: #000;
 }

 #site-header, .page-header, #site-footer {
   display: none;
 }

 #icoder_platform {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   background: #f5f7fa;
 }

 .ico-welcome {
   padding: 100px;
   text-align: center;
   direction: ltr;
   font-size: 16pt;
   font-weight: bold;
   color: #00ffad;
   background: #000518;
 }

 .ico-btn {
   width: fit-content;
   margin: auto;
   font-size: 10pt;
   padding: 6px 15px;
   border-radius: 5px;
   box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
   cursor: pointer;
   border: 1px solid #fff;
   border-radius: 5px;
   transition: all 100ms;
   color: #000;
   text-decoration: unset !important;
   background: #eff0f2;
   text-wrap: nowrap;
 }

 .ico-btn[data-action="info"] {
   background: #004aff;
   color: #fff;
 }

 .ico-btn[data-action="info"]:hover {
   background: #0031ad;
 }

 .btn-default {
   background: #eff0f2;
 }

 .ico-btn:hover {
   background: rgba(46, 51, 56, .09);
 }

 [data-action="copy"] {
   cursor: copy;
 }

 /* component table start */
 .ico-cmp-table {
   text-align: center;
 }

 .ico-cmp-table .cmp-table-header {
   background: #d9d9d9;
 }

 .ico-cmp-table .cmp-table-header td {
   font-size: 10pt;
   font-weight: bold;
   text-wrap: nowrap;
 }

 .ico-cmp-table .cmp-table-items td {
   vertical-align: middle;
   text-align: center;
   font-size: 9pt;
   text-wrap: nowrap;
 }


 .ico-cmp-table .cmp-table-items input {
   background: #f0f0f0;
   text-align: center;
   border-radius: 9px;
 }

 .ico-cmp-table .index {
   background: #f0f0f0;
   text-align: center;
   border-radius: 9px;
 }

 /* component table end */



 /* alert start */
 #icoder_show_alert {
   position: fixed;
   top: 40px;
   right: 0;
   margin: auto;
   display: flex;
   justify-content: center;
   width: 100%;
   align-items: center;
   z-index: 100000000000000;
   direction: rtl;
 }

 #icoder_show_alert p {
   width: fit-content;
   padding: 8px 20px;
   font-size: 12pt;
   border-radius: 5px;
   text-align: center;
   line-height: 28px;
   direction: rtl;
   display: none;
 }

 #icoder_show_alert._success p {
   background: #1fff1f;
 }

 #icoder_show_alert._danger p {
   background: #ff1f7c;
 }

 #icoder_show_alert._warning p {
   background: #ffb01f;
 }

 #icoder_show_alert._info p {
   background: #00dcff;
 }

 @media screen and (max-width: 768px) {
   #icoder_show_alert {
     top: 0;
   }

   #icoder_show_alert._success p {
     font-size: 11pt;
     line-height: 20px;
   }
 }

 /* alert end */

 /* COMPONENTS: */
 /* component btn start */

 .icoder-cmp-btn {
   background: #f1f1f1 !important;
   text-align: center !important;
   padding: 0 16px !important;
   height: 30px;
   width: fit-content !important;
   border-radius: 8px !important;
   cursor: pointer !important;
   border: 1px solid #d1d1d1 !important;
   line-height: 30px !important;
   color: #000 !important;
   transition: all 300ms;
 }

 .icoder-cmp-btn[data-action=""]:hover,
 .icoder-cmp-btn[data-action=""].select {
   background: #dddcdc !important;
   border: 1px solid #686868 !important;
 }

 .icoder-cmp-btn[data-action="success"]:hover,
 .icoder-cmp-btn[data-action="success"].select {
   background: #05ff7e !important;
   border: 1px solid #04b158 !important;
 }

 .icoder-cmp-btn[data-action="warning"]:hover,
 .icoder-cmp-btn[data-action="warning"].select {
   background: #fff705 !important;
   border: 1px solid #b19504 !important;
 }

 .icoder-cmp-btn[data-action="danger"]:hover,
 .icoder-cmp-btn[data-action="danger"].select {
   background: #ff3434 !important;
   border: 1px solid #ff0000 !important;
   color: #fff !important;
 }

 .icoder-cmp-btn[data-action="info"]:hover,
 .icoder-cmp-btn[data-action="info"].select {
   background: #05daff !important;
   border: 1px solid #04b19b !important;
 }

 .icoder-cmp-btn[data-action="info"]:hover,
 .icoder-cmp-btn[data-action="info"].select {
   background: #05daff !important;
   border: 1px solid #04b19b !important;
 }

 /* component btn end */
 /* component tab start */

 .icoder-cmp-tab {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 94%;
   margin: auto;
   direction: rtl;
 }

 .icoder-cmp-tab .icoder-cmp-tab-menu {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
   padding: 10px 30px;
   border-radius: 8px;
   width: 100%;
   justify-content: space-around;
   border: 1px solid #ddd;
   overflow-x: auto;
 }

 .icoder-cmp-tab .icoder-cmp-tab-menu .icoder-cmp-tab-item {
   cursor: pointer;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px 10px;
   border-bottom: 1px solid #ddd;
   transition: all 100ms;
   margin-top: 20px;
   text-wrap: nowrap;
 }

 .icoder-cmp-tab .icoder-cmp-tab-menu .icoder-cmp-tab-item[data-type="submit"] {
   margin-top: 20px;
   margin-bottom: 10px;
 }

 .icoder-cmp-tab .icoder-cmp-tab-menu .icoder-cmp-tab-item:hover,
 .icoder-cmp-tab .icoder-cmp-tab-menu .icoder-cmp-tab-item.select {
   border-bottom: 2px solid #0066ff;
 }

 .icoder-cmp-tab .icoder-cmp-tab-page {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   box-shadow: 2px 18px 50px 0px rgba(0, 0, 0, 0.15);
   padding: 10px 30px;
   border-radius: 8px;
   width: 100%;
   justify-content: space-around;
   border-bottom: 1px solid #ddd;
   margin-top: 7px;
   border: 1px solid #ddd;
       overflow-y: auto;
 }

 .icoder-cmp-tab .icoder-cmp-tab-page .icoder-cmp-tab-item {
   display: none;
   width: 100%;
   align-items: start;
 }

 .icoder-cmp-tab .icoder-cmp-tab-page .icoder-cmp-tab-item.select {
   display: flex;
 }

 .icoder-cmp-tab[data-action="vertical"] {
   flex-direction: row;
   height: 100%;
   justify-content: start;
   align-items: start;
   gap: 10px;
 }

 .icoder-cmp-tab[data-action="vertical"] .icoder-cmp-tab-menu {
   width: auto;
   flex-direction: column;
   height: 100%;
   align-items: start;
   justify-content: start;
   overflow-y: auto;
   direction: ltr;
   border: 1px solid #494949;
   border-right: unset;
   gap: 20px;
   padding: 10px 20px;
 }

 .icoder-cmp-tab[data-action="vertical"] .icoder-cmp-tab-menu .icoder-cmp-tab-item {
   text-wrap: wrap;
   direction: rtl;
   text-align: center;
 }

 .icoder-cmp-tab[data-action="vertical"] .icoder-cmp-tab-page {
   height: 100%;
   margin: 0;
   border: 1px solid #515151;
   align-items: start;
   background: #f5f7fa;
   overflow-y: auto;
 }

 /* component tab end */

 /* component form start */
 .icoder-cmp-form {
   width: calc(100% - 20px);
   display: flex;
   align-items: start;
   direction: rtl;
   gap: 15px;
   justify-content: start;
   flex-direction: column;
   padding: 10px;
 }

 .icoder-cmp-form .icf-row {
   display: flex;
   flex-direction: column;
   gap: 10px;
   justify-content: center;
   align-items: start;
   width: 100%;
 }

 .icoder-cmp-form .icf-row label {
   color: #1a1a1a;
   line-height: 20px;
 }

 .icoder-cmp-form .icf-row input {
   width: 100%;
   margin: 0 5px;
   border: 1px solid #cccccc;
   background: #fdfdfd;
   height: 30px;
   border-radius: 5px;
   padding: 0 10px;
   text-align: right;
 }

 .icoder-cmp-form .icf-row textarea {
   width: 100%;
   margin: 0 5px;
   border: 1px solid #cccccc;
   background: #fdfdfd;
   border-radius: 5px;
   text-align: right;
   min-height: 80px;
   padding: 10px;
 }

 .icoder-cmp-form .icf-row input[type="radio"],
 .icoder-cmp-form .icf-row input[type="checkbox"] {
   width: auto;
   height: auto;
   border: none !important;
   outline: none !important;
   min-width: 16px;
   min-height: 16px;
   cursor: pointer;
 }

 .icoder-cmp-form .icf-row input[type="range"] {
   border: none !important;
   outline: none !important;
   cursor: move;
 }

 .icoder-cmp-form .icf-row input[type="file"] {
   padding-top: 9px;
 }

 .icoder-cmp-form .icf-row input[type="color"] {
   width: auto;
   min-width: 100px;
   cursor: pointer;
 }

 .icoder-cmp-form .icf-row input:focus,
 .icoder-cmp-form .icf-row textarea:focus {
   background: #e7f2fe;
   outline: 1px solid rgb(0, 81, 255);
 }

 .icoder-cmp-form .icf-row[data-action="danger"] input,
 .icoder-cmp-form .icf-row[data-action="danger"] textarea {
   outline: 1px solid red;
   background: #fff3f3;
 }

 .icoder-cmp-form .icf-row[data-action="success"] input,
 .icoder-cmp-form .icf-row[data-action="success"] textarea {
   outline: 1px solid #0fbc00;
   background: #f5fff3;
 }

 .icoder-cmp-form .icf-row[data-action="warning"] input,
 .icoder-cmp-form .icf-row[data-action="warning"] textarea {
   outline: 1px solid #ffeb00;
   background: #fffce7;
 }

 .icoder-cmp-form .icf-row[data-action="select"] input,
 .icoder-cmp-form .icf-row[data-action="select"] textarea {
   outline: 1px solid #ffeb00;
   background: #fffce7;
 }

 @media screen and (min-width:840px) {

   .icoder-cmp-form .icf-row textarea,
   .icoder-cmp-form .icf-row input {
     width: 60%;
   }
 }

 /* component form end */

 /* use case */

 .ico-boxshadow {
   box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
 }

 .ico-margin-a {
   margin: auto;
 }

 .ico-flex {
   display: flex;
 }

 .ico-flex-center {
   justify-content: center;
 }

 .ico-align-center {
   align-items: center;
 }

 .ico-width-fit {
   width: fit-content;
 }

 .ico-pointer {
   cursor: pointer;
 }

 .ico-radius-5 {
   border-radius: 5px;
 }

 .ico-radius-10 {
   border-radius: 10px;
 }

 .ico-radius-15 {
   border-radius: 15px;
 }

 @media screen and (min-width:864px) {
  .icoder-cmp-tab .icoder-cmp-tab-menu .icoder-cmp-tab-item {
    font-size: 11pt;
  }
 }