/**========================================================================
* ?                                ABOUT
* @author         :  8lackMask
* @email          :  blackcodymask@gmail.com
* @store          :  https://blackmask.codychat.store/
* @product        :  Dolphin (theme)
* @version        :  1.0
*========================================================================**/
/* general colors */
a {color:#ffb221;}
body {background:#ededed; color:#333;}
button { background:transparent; color:#fff; }
input,textarea,.post_input_container{background:#ffff;border:1px solid #c7c8c9!important;border-radius:1px;}
.setdef { color:#333; }

/* item with background no effect */
.bback { background:rgb(0,0,0,0.05); }

/* item with background no effect with border */
.bbackb { background:rgb(0,0,0,0.05); border:1px solid rgb(0,0,0,0.08); }

/* item with no background and hover effect */
.bhover:hover, .bhoverr:hover { background:rgb(0,0,0,0.05); }

/* item with background and hover effect */
.bbackhover { background:rgb(0,0,0,0.05); }
.bbackhover:hover { background:rgb(0,0,0,0.025); }

/* item width background and hover effect with a border */
.bbackhoverb { background:rgb(0,0,0,0.05); }
.bbackhoverb:hover { background:rgb(0,0,0,0.025); border:1px solid rgb(0,0,0,0.08); }

/* item with no background with line separator and hover effect */
.blisting { border-bottom: 1px solid rgb(0,0,0,0.08); }
.blisting:hover { background: rgb(0,0,0,0.05); }

/* item with no background with line separator */
.blist { border-bottom: 1px solid rgb(0,0,0,0.08); }

/* private panel top */
.back_ptop{background:#8196ae;color:#fff}

/* page menu & page sub menu */
.bpmenu:hover { background: rgb(255,255,255,0.40); }
.bsub { background:rgb(0,0,0,0.1); }
.bsub:hover { background:rgb(0,0,0,0.2); }

/* sub menus for card, logs, wall, news */
.bmenu, .submenu { border-bottom:1px solid rgb(0,0,0,0.05); }
.bmenu:hover, .submenu:hover { background:rgb(0,0,0,0.05); }

/* box shadow */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { box-shadow:0 1px 3px rgb(0,0,0,0.2); }

/* main item selected for panel and box */
.bselected { background:rgb(0,0,0,0.08); }

/* reg menu selected item */
.rselected { background:rgb(0,0,0,0.08); }

/* page selected */
.pselected { color:#ff5c00; }

/* current item selected */
.cselected, .liked { background:rgb(0,0,0,0.10); }

/* paginate item selected */
.pag_btn { background:rgb(0,0,0,0.05); color:#666; }
.pagselected, .pag_btn:hover { background:rgb(0,0,0,0.10); }

/* count and gold tag */
.gtag { background:#ff5c00; border:1px solid rgb(0,0,0,0.08); color: #fff; }

/* border color for separator and items border */
.bborder { border-bottom:1px solid rgb(0,0,0,0.08); }
.tborder { border-top:1px solid rgb(0,0,0,0.08); }
.lborder, .ppanel { border-left:1px solid rgb(0,0,0,0.08); }
.rborder { border-right:1px solid rgb(0,0,0,0.08); }
.fborder { border:1px solid rgb(0,0,0,0.08); }

/* float top color */
.float_top { border-bottom:1px solid rgb(0,0,0,0.08); }
.float_ctop { border-bottom:1px solid rgb(0,0,0,0.08); }

/* headers colors and top box colors */
.bhead{background:#edf1f4;color:#3781dc;border-bottom:1px solid #c7c8c9;}
.modal_top,.pro_top{background:#8196ae;color:#fff}
.bfoot{background:#edf1f4;color:#3781dc;border-top:1px solid #c7c8c9;}
.foot{background:#d9e4ea;border-top:1px solid #c7c8c9;color:#333;}

/* background major element panel, page menu, float menu, modal, chat boxes */
.backglob { background:#fff; }
.back_chat { background:#fff; }
.back_priv {
  background: 
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), 
    url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_4.png?ts=1750294543') no-repeat center center;
  background-size: cover;
  background-blend-mode: lighten;
  backdrop-filter: blur(2px);
}
.back_panel {
  background: #d9e4ea url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') no-repeat center center;
  background-size: cover;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.back_menu,
.back_modal,
.back_box,
.page_element,
.back_quote {
  background: #eaeff3 url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') no-repeat center center;
  background-size: cover;
  border: 1px solid #c7c8c9;
  box-shadow: none;
}

.back_menu.card_menu {
  border: none;
  background: #eaeff3 url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') no-repeat center center;
  background-size: cover;
}

.back_pmenu {
  background: #d9e4ea url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') no-repeat center center;
  background-size: cover;
  color: #333;
}

.back_input {
  background: linear-gradient(#f7f9fa, #b7c6d2 40px), url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') no-repeat center center;
  background-size: cover;
  border-top: 1px solid #c7c8c9;
}

.back_box {
  background: url('https://www.socialcreator.com/srv/imgs/temp/hdjyp564cl_2.png?ts=1750294543') center/contain no-repeat;
  background-color: #eaeff3;
  border: 1px solid #c7c8c9;
  box-shadow: none;
}

/* main theme color */
.theme_color { color:#ff5c00; }
.default_color { color:#3781dc; }
.error  { color:#e34343; }
.success { color:#22a410; }
.warn { color:#ffb221; }

/* button colors */
.theme_btn, .back_theme { background:#ff5c00; color:#fff; }
.default_btn, .back_default { background:#3781dc; color:#fff; }
.defaultd_btn { background:#3781dc; color:#fff; }
.ok_btn { background:#22a410; color:#fff; }
.warn_btn { background:orange; color:#fff; }
.delete_btn { background:#e34343; color:#fff; }
.send_btn { color:#ff5c00; }

/* default username color */
.user { color:#333; }

/* chat system messsage text color */
.chat_system { color:#000; }

/* opacity for offline users in list */
.offline { opacity:0.5; }

/* menu icon */
.menui { color:#ff5c00; }
.subi { color:#ff5c00; }

/* wall reply background */
.reply_item { background:#f6f6f6; }

/* main post item option wall and news */
.main_post_item { color:rgb(0,0,0,0.5); }

/* input option background colors */
.input_item{color:#3781dc}

/* private log bubble colors */
.target_private, .hunt_quote {color:#fff; background:#3781dc;}
.hunter_private, .targ_quote {color:#fff; background:#ff5c00;}

.private_avatar{width:50px;}
.outpriv .avatar_private{margin-right:auto;}
.inpriv .avatar_private{margin-left:auto;}
.prbox{position:relative;}
.hunter_private::after{content:'';position:absolute;right:100%;top:12px;border-right:13px solid #e65300;border-bottom:13px solid transparent;}
.target_private::after{content:'';position:absolute;left:100%;top:12px;border-left:13px solid #2c71c6;border-bottom:13px solid transparent;}
.hunt_quote ~ .hunter_private::after,.targ_quote ~ .target_private::after{display:none;}

/* صندوق الاقتباس بخلفية فاتحة وحدود برتقالية */
.cquote {
  background: #fffaf2; /* خلفية فاتحة دافئة */
  border: 2px solid #ffa500;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  color: #1a1a1a;
}

/* عند التمرير */
.cquote:hover {
  background: #fff1db;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* اسم المستخدم بخلفية سوداء شفافة */
.cqname {
  color: #d2691e;
  font-weight: bold;
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.25); /* أسود شفاف */
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}

/* نص الاقتباس */
.cqmess {
  font-style: italic;
  margin-top: 4px;
  color: #202020;
}

/* دعم الوضع الداكن */
@media (prefers-color-scheme: dark) {
  .cquote {
    background: #2d2d2d;
    border-color: #ffb347;
    color: #f2f2f2;
  }

  .cqname {
    background: rgba(255, 255, 255, 0.1);
    color: #ffcc99;
  }

  .cqmess {
    color: #e8e8e8;
  }
}

/* تحسين قائمة التبويب */
.tab_menu {
  background: linear-gradient(180deg, #f9f9f9, #eaeaea);
  margin-bottom: 0;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
}

/* تحسين العنصر المحدد في التبويب */
.tab_selected {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.15));
  color: #333;
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

.tab_selected:hover {
  background: rgba(0, 0, 0, 0.25);
  transform: scale(1.06);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* تأثير عند تمرير الماوس على عنصر التبويب */
.tab_menu_item {
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

.tab_menu_item:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
  transform: translateY(-2px);
}

/* تحسين القائمة المنبثقة */
.modal_mback {
  background: rgba(0, 0, 0, 0.05);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
}

/* تحسين حدود النافذة */
.modal_mborder {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* تحسين العنصر المحدد في القائمة المنبثقة */
.modal_selected {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease-in-out;
}

.modal_selected:hover {
  background: rgba(0, 0, 0, 0.18);
  transform: scale(1.04);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
}

/* خلفية شفافة مع تأثير ضبابي متطور */
.modal_back {
  background-color: rgba(0, 0, 0, 0.3); /* شفافية محسّنة */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* تأثير ظل ناعم لإضافة عمق */
  border-radius: 12px; /* زوايا ناعمة لإحساس عصري */
  transition: all 0.5s ease-in-out;
}

/* حركة اهتزاز مع سقوط من اليمين لليسار */
@keyframes dropShakeRightToLeft {
  0% {
    opacity: 0;
    transform: translate(100px, -50px) rotate(15deg) scale(0.9);
  }
  40% {
    opacity: 1;
    transform: translate(-10px, 20px) rotate(-4deg);
  }
  60% {
    transform: translate(8px, 10px) rotate(2deg);
  }
  80% {
    transform: translate(-4px, 5px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* تطبيق التأثير على العناصر */
.modal_back {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: dropShakeRightToLeft 0.7s ease-out;
  transition: all 0.4s ease-in-out;
  will-change: transform;
}



/* تحسين خلفية سجل الدردشة وإضافة تأثير عند المرور */
.log2 { 
    background: rgba(234,239,243,0.4); /* زيادة وضوح الخلفية */
    transition: 0.3s ease-in-out;
}
.log2:hover { 
    background: rgba(234,239,243,0.6); /* تغيير اللون عند التفاعل */
}

.topic_log {
    color: #fff;
    border-radius: 21px 0 21px 0;
    background: linear-gradient(to right,#c31432,#240b36);
    height:80px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
    font-family: 'Tajawal', sans-serif;
}

/* تحسين شريط تحميل الملفات بتأثير ديناميكي */
.bprogress { 
    background: linear-gradient(90deg, #22a410, #50d85f); /* تدرج لوني */
    animation: loadingBar 1s infinite alternate;
}
@keyframes loadingBar {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(1.05); }
}

/* تحسين الإشعارات بإضافة نبض لجذب الانتباه */
.bnotify { 
    background: #FF3F33; 
    color: #fff; 
    animation: notifyPulse 1s infinite alternate;
}
@keyframes notifyPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* تحسين تاريخ الرسائل بتباين أفضل */
.sub_date, .sub_chat, .sub_priv { 
    color: #000; /* لون رمادي أكثر وضوحًا */
    font-style: italic; /* تمييز النص */
}

/* تحسين النصوص الثانوية */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap');

.sub_text,
.list_mood {
    font-size: 10px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0.4px;
    color: #000; /* لون عادي مريح للعين */
    opacity: 0.9;
    transition: all 0.4s ease-in-out;
    position: relative;
}

/* التأثير يظهر فقط عند تمرير المؤشر */
.sub_text:hover,
.list_mood:hover {
    background: linear-gradient(120deg, transparent 0%, #d00000 30%, #008000 50%, #000000 70%, transparent 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lightFlash 3.5s ease-in-out forwards;
}

@keyframes lightFlash {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* تحسين مظهر الإعجابات */
.plikes, .lite_olay { 
    background-color: rgba(0,38,85,0.3); 
    color: #fff; 
    border-radius: 5px; /* زوايا ناعمة لمظهر عصري */
    box-shadow: 0 2px 5px rgba(0, 38, 85, 0.4); /* إضافة ظل */
}

/* تحسين لون مؤشر التحميل */
.bspin { 
    color: rgba(0,0,0,0.5); /* لون داكن قليلاً لزيادة التباين */
}

/* special chat item */
.my_notice { color:#fff; background:#ff5c00; }
.system_text { background:#ededed; color:#666; }

/* outside pages background */
.back_page { background:#222; color:#fff; }

/* video background color */
.post_video { background:rgb(0,0,0,1); }

/* slider */
.boom_slider .ui-widget-content { background: #fff; }
.boom_slider .ui-state-default { background: #ff5c00 !important; }
.boom_slider .ui-state-active { background: #ff6d1b !important; }
.boom_slider .ui-slider-range { background:#ff5c00; }

/* select input color */
/* الألوان الأساسية: أحمر غامق مع تدرجات فاخرة */
:root {
  --main-red: #8B0000; /* أحمر غامق ملكي */
  --hover-red: #a11111;
  --light-gray: #f8f8f8;
  --medium-gray: #666;
  --dark-gray: #333;
  --border-gray: #ccc;
}

/* الزر والقائمة المنسدلة */
.selectboxit-list,
.selectboxit-btn {
  background-color: #fff;
  color: var(--main-red);
  border: 1px solid var(--main-red) !important;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(139, 0, 0, 0.1);
}

/* السهم */
.selectboxit-default-arrow {
  border-top: 5px solid var(--main-red);
}

/* عند التركيز أو التحويم */
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
  background: var(--light-gray);
  color: var(--hover-red);
  box-shadow: 0 3px 6px rgba(139, 0, 0, 0.15);
}

/* الخيارات */
.selectboxit-options {
  background: #fff;
  border: 1px solid var(--main-red);
  border-radius: 8px;
  overflow: hidden;
}

/* عنصر الخيار */
.selectboxit-list .selectboxit-option-anchor {
  color: var(--medium-gray);
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* العنصر المحدد أو عند التركيز */
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
  background-color: #f0e6e6;
  color: var(--dark-gray);
}

/* لمسة خاصة عند التمرير */
.selectboxit-list .selectboxit-option-anchor:hover {
  background-color: #faeeee;
  color: var(--hover-red);
}

/* Element nice tab style */
.panel_bar, .emo_head {
  background: #3b4d63; /* لون أغمق وأكثر عمقًا */
  border-bottom: 1px solid #ccd6e3;
  color: #f0f4f9;
  padding: 6px 0 6px;
  font-weight: 500;
}

.emo_head {
  padding: 4px 0 0 12px;
}

/* العناصر المحددة */
.panel_option.bselected,
.emo_menu_item.bselected,
.emo_menu_item_priv.bselected {
  position: relative;
  color: #2c3e50; /* لون داكن أنيق */
  z-index: 1;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* تأثير الخلفية للتبويبة المحددة */
.panel_option.bselected::after,
.emo_menu_item.bselected::after,
.emo_menu_item_priv.bselected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 115%;
  background: linear-gradient(to bottom, #e9f0f5, #d2dee8);
  border: 1px solid #d1dce6;
  border-bottom: 1px solid #e9f0f5;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.3s ease-in-out;
}

/* user list padding */
#container_user{padding:0!important;}

/* online user item */
.user_item {
  border-radius: 0px;
  transition: background 0.3s ease;
}

.user_item:hover {
  background-color: transparent;
}

.user_item:not(.offline):nth-child(even) {
  background-color: #eaeff3;
}

/* user card menu */
.avbackground{background:#8196ae;color:#fff;}

/* login page */
#intro_top {
  background: #ededed url('images/background_login.jpg') no-repeat center;
  background-size: cover;
}

#login_all {
  background: url('images/background_login.jpg') no-repeat center;
  background-size: cover;
  color: #fff;
  border-radius: 14px;
  border: 0px solid #c7c8c9;
  padding: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.30);
}

/* Element radius */
.user_item_avatar .acav,
.cavatar,
.room_cicon,
.room_icon,
.ucount,
.selectboxit-container .selectboxit,
button,
input,
textarea,
.post_input_container,
.back_menu,
.back_box,
.back_modal,
.page_element,
.sp_box,
.my_notice,
.hunter_private,
.target_private,
.plike_item,
.ulist_item,
.reply_item,
.fmenu_item,
.reg_menu_item,
.tab_menu_item,
.action_item,
.modal_menu_item {
  border-radius: 20px !important;
  transition: all 0.3s ease-in-out;
}

/* تخصيص شكل صناديق الاقتباس لتكون مربعة */
.cquote,
.back_quote,
.hunt_quote,
.targ_quote {
  border-radius: 0px !important;
}

/* جعل الأزرار نحيفة وأنيقة */
button {
  padding: 6px 14px !important;
  font-weight: 500;
  border-radius: 20px !important;
}

/* تحسين مظهر الأفاتار */
.user_item_avatar .acav,
.cavatar {
  border-radius: 50% !important;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  will-change: transform, box-shadow;
  animation: fadeIn 0.6s ease-in-out;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.user_item_avatar .acav:hover,
.cavatar:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
  filter: contrast(1.1) saturate(1.2);
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.7) rotate(-5deg); }
  50% { opacity: 0.5; transform: scale(0.9) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}


.user_item {
    border-radius: 8px 3px 20px 0px;
    /* ترتيب الزوايا: top-left, top-right, bottom-right, bottom-left */
    margin-bottom: 4px;
    border: 1px dashed #3b4d63;
    box-shadow: 0 3px 5px gray;
    color: #3b4d63;
}


.onair_color {
    background: #3c3b3f;
    background: -webkit-linear-gradient(to top,#605C3C,#3C3B3F);
    background: linear-gradient(to top,#605C3C,#3C3B3F);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #6f6f6f;
    outline-offset: -5px
}

.online_color {
    background: #00b09b;
    background: -webkit-linear-gradient(to right,#96c93d,#00b09b);
    background: linear-gradient(to right,#96c93d,#00b09b);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #055249;
    outline-offset: -5px
}

.sadmin_color {
    background: #6a3093;
    background: -webkit-linear-gradient(to right,#a044ff,#6a3093);
    background: linear-gradient(to right,#a044ff,#6a3093);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #b66eff;
    outline-offset: -5px
}

.admin_color {
    background: #403a3e;
    background: -webkit-linear-gradient(to right,#BE5869,#403A3E);
    background: linear-gradient(to right,#BE5869,#403A3E);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #dd7c8c;
    outline-offset: -5px
}

.bot_color {
    background: #fff;
    background: -webkit-linear-gradient(to right,#ffffff,#7d3f3f);
    background: linear-gradient(to right,#0a0a2b,#e01b1b);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #908f91;
    outline-offset: -5px
}

.mod_color {
    background: #ccccb2;
    background: -webkit-linear-gradient(to right,#757519,#CCCCB2);
    background: linear-gradient(to right,#757519,#CCCCB2);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #acac3a;
    outline-offset: -5px
}

.vip_color {
    background: #7b4397;
    background: -webkit-linear-gradient(to right,#dc2430,#7b4397);
    background: linear-gradient(to right,#dc2430,#7b4397);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #e95660;
    outline-offset: -5px
}

.super_color {
    background: #6a3093;
    background: -webkit-linear-gradient(to right,#a044ff,#6a3093);
    background: linear-gradient(to right,#d6d6e7,#0745ff);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #2405ff;
    outline-offset: -5px
}

.king_color {
    background: #56ab2f;
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
    background: linear-gradient(to right, #a8e063, #56ab2f);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #28a745;
    outline-offset: -5px;
}



.ownner_color {
    background: #6a3093;
    background: -webkit-linear-gradient(to right,#a044ff,#6a3093);
    background: linear-gradient(to right,#3838c4,#0745ff);
    text-align: center;
    color: #fff;
    margin: 5px 0;
    outline: 1px dashed #2405ff;
    outline-offset: -5px
}