﻿.DirectionsOverlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    background:rgba(0,0,0,.25);
}

.DirectionsWindow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:700px;
    height:700px;
    padding:8px;
    box-sizing:border-box;
    background:#eef3f8;
    border:1px solid #7f9db9;
    box-shadow:0 0 12px rgba(0,0,0,.35);
    font:11px Tahoma,Arial;
}

.DirectionsTitleBar{
    height:30px;
    margin:-8px -8px 8px;
    padding:0 4px 0 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    background:linear-gradient(#d9ecff,#a9c9e8);
    border-bottom:1px solid #7f9db9;
}

.DirectionsTitleText{
    font:bold 12px Tahoma;
    color:#1f344a;
}

.btnDirectionsClose{
    width:24px;
    height:20px;
    padding:0;
    background:linear-gradient(#ffb5a8,#d94b36)!important;
    border:1px solid #8c2f22!important;
    color:#fff!important;
    font:bold 11px Tahoma;
    cursor:pointer;
}

.DirectionsContent{
    height:646px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:8px;
}

.DirectionItem{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    padding:6px;
    box-sizing:border-box;
    background:#f7f9fb;
    border:1px solid #b6c5d3;
}

.DirectionCaption{
    height:22px;
    line-height:20px;
    font:bold 10px Tahoma;
    color:#34495e;
}

.DirectionCaptionArabic{
    direction:rtl;
    text-align:right;
}

.DirectionText{
    width:100%;
    flex:1;
    min-height:0;
    padding:7px;
    box-sizing:border-box;
    resize:none;
    overflow-y:auto;
    background:#fff;
    border:1px solid #7f9db9;
    outline:none;
    font:11px Tahoma,Arial;
    line-height:18px;
}

.DirectionEnglish{
    direction:ltr;
    text-align:left;
}

.DirectionArabic{
    direction:rtl;
    text-align:right;
}

.btnDirectionSave{
    width:100%;
    height:27px;
    margin-top:6px;
    padding:0;
    background:linear-gradient(#fff,#e2ebf3,#bfd0df)!important;
    border:1px solid #7f9db9!important;
    color:#263c50!important;
    font:bold 10px Tahoma;
    cursor:pointer;
}