.boxcustom {
    position: relative;
    z-index: 0;
    display: table;
    /*ooverflow: visible;
    verflow:hidden;*/
    margin: 5px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
    text-align: left;
    font-size: 1.2em;
    min-height: 50px;
    color: #000000;
    font-family: Arial, sans-serif;
    float: left;
    width: 98%;
    background-color: white;
    height: 50px;
    min-width: 1250px;
    /*z-index:1000;*/
}

.pad {
    padding-left: 4px;
}

.dayfirst {
    width: 100%;
    background-color: lightblue;
    height: 30px;
    float: left;
    padding-top: 5px;
    font-size: x-large;
    padding-left: 7px;
    font-weight: bold;
    margin-bottom: 1px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.day {
    width: 100%;
    background-color: lightblue;
    margin-top: 5px;
    height: 30px;
    float: left;
    padding-top: 5px;
    font-size: x-large;
    padding-left: 7px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.dayweekend {
    width: 100%;
    background-color: coral;
    margin-top: 5px;
    height: 30px;
    float: left;
    padding-top: 5px;
    font-size: x-large;
    padding-left: 7px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.dayfirstweekend {
    width: 100%;
    background-color: coral;
    height: 30px;
    float: left;
    padding-top: 5px;
    font-size: x-large;
    padding-left: 7px;
    font-weight: bold;
    margin-bottom: 1px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.portcontainerfirst {
    width: 99%;
    float: left;
    min-height: 50px;
    height: auto;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
    background-color: white;
}
.berth-calendar .portcontainer{
    display: flex;
}

.portcontainer {
    margin-top: 5px;
    width: 99%;
    float: left;
    min-height: 50px;
    height: auto;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
    background-color: white;
    display: flex;
}

.berth-calendar .port {
    min-width: 18%;
    max-width: 18%;
    width: 18%;
    height: auto;
}

.berth-calendar .portname {
    min-width: calc(100% - 47px);
    max-width: calc(100% - 47px);
    width: calc(100% - 47px);
    margin: 8px 0px 0px 5px;
}

.port {
    /*min-width: 115px;
    width: 115px;
    max-width: 115px;*/
    min-width: 6%;
    max-width: 6%;
    width: 6%;
    float: left;
    background-color: antiquewhite;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
    flex-direction: column;
    /*height: 98%;*/
    height: auto;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.portname {
    margin-top:3px;
    height: auto;
    float:left;
    /*margin-left:3px;*/
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
    width:98px;
    min-width:98px;
    max-width:98px;
    font-weight:bold;
    font-weight: bold;
    font-size: smaller;
}

.berth-calendar .portflag {
    width: 42px;
    height: 42px;
    float: left;
}


.portflag {
    width: 30px;
    height: 22px;
    float: left;
}

.myhint {
    border-color: orange;
    background-color: orange;
    color: white;
    font-weight: bold;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2),0 32px 64px 0 rgba(0,0,0,.24);
}

    /*.myhint > div:after {
        border-right-color: orange !important;
        border-left-color: orange !important;
    }*/

    .myhint.dxhControl.dxh-bottom .dxh-callout:after {
        border-bottom-color: orange !important;
    }

    .myhint.dxhControl.dxh-right .dxh-callout:after {
        border-right-color: orange !important;
    }

    .myhint.dxhControl.dxh-left .dxh-callout:after {
        border-left-color: orange !important;
    }

    .myhint.dxhControl.dxh-top .dxh-callout:after {
        border-top-color: orange !important;
    }

.noarrivals {
    width: 100%;
    background-color: wheat;
    margin-top: 20px;
    height: 30px;
    float: left;
    padding-top: 5px;
    font-size: x-large;
    padding-left: 7px;
    font-weight: bold;
}

.arrivalcontainer {
    min-width: 250px;
    width: 250px;
    max-width: 250px;
    float: left;
    padding: 5px;
    background-color: lightgrey;
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.arrivals .berth-arrivals {
    min-width: 300px;
    width: 300px;
    max-width: 300px;
}

.arrivalcontainerarrives {
    min-width: 250px;
    width: 250px;
    max-width: 250px;
    float: left;
    padding: 5px;
    background-color: rgb(255, 255, 134);
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.arrivalcontainerarrived {
    min-width: 250px;
    width: 250px;
    max-width: 250px;
    float: left;
    padding: 5px;
    background-color: rgb(154, 255, 59);
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.arrivalcontainersailed {
    min-width: 250px;
    width: 250px;
    max-width: 250px;
    float: left;
    padding: 5px;
    background-color: rgb(255, 134, 134);
    height: 40px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
}

.daycontainer {
    border-radius: 4px; 
    border: 1px solid rgb(78,93,124);
    background-color: white;
    height:auto;
    width:100%;
}

.yachticon
{
    width:60px;
    height:30px;
    border:none;
    color:transparent;
    margin-left:3px;
    float:left;
}
.berth-arrivals{
    height: auto !important;
}

.berth-arrivals .arrivalnumber {
    width: 225px;
    min-width: 225px;
    max-width: 225px;
    display: grid;
}

.arrivalnumber {
    margin-top: 6px;
    height: auto;
    float: left;
    margin-left: 3px;
    width: 147px;
    min-width: 147px;
    max-width: 147px;
    font-weight: bold;
    font-size: small;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

.yachtinfo {
    margin-top:2px;
    height: auto;
    float:left;
    width:100%;
    min-width:100%;
    max-width:100%;
    font-weight:bold;
    font-size:x-small;
}

.yachtinfo.berth-arrivals{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.berth-calendar .arrivals {
    min-width: 81%;
    max-width: 81%;
    width: 81%;
}
.arrivals {
    min-width: 93%;
    max-width: 93%;
    width: 93%;
    height: auto;
    float: left;
}

.boxcustom1 {
    position: relative;
    z-index: -1;
    /*overflow: visible;
    overflow:hidden;*/
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom:5px;
    padding-left: 10px;
    padding-bottom:2px;
    padding-top:2px;
    padding-right:10px;
    border-radius: 4px;
    border: 1px solid rgb(78,93,124);
    text-align: left;
    font-size: 0.8em;
    color: #000000;
    font-family: Arial, sans-serif;
    float: left;
    width: 98%;
    background-color: white;
    height: auto;
    min-width: 1250px;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}

.legend {
    text-align: left;
    font-size: 0.6em;
}